Desarrollo Web
CSS Gradient Generator
Crear un degradado lineal, radial o cónico a partir de varios colores y obtener el CSS listo para usar.
0° — arriba, luego en el sentido de las agujas del reloj.
A CSS gradient is a smooth transition between multiple colors, generated by the browser itself with no image needed. This tool lets you visually build a linear, radial, or conic gradient and copy the finished CSS instantly.
How to use it
- Add color stops and drag them to fine-tune where each transition happens.
- Pick a gradient type — linear (a direction in degrees), radial (shape and center position), or conic (rotation around a point).
- Copy the finished CSS with one click and paste it into background or background-image.
Common uses
- Picking a background for a hero section or button without opening a graphics editor.
- Recreating a gradient from a design mockup (Figma, etc.) in exact CSS syntax.
- Quickly experimenting with color transitions before locking a choice into a design system.
Things to keep in mind
A radial gradient defaults to stretching into the shape of its element (an ellipse), not always staying a circle — worth accounting for on rectangular blocks.
Multiple gradients can be layered by listing them comma-separated in background-image — it works like stacked layers, with the first one in the list on top.
Artículo sobre esta herramienta: Degradados CSS: en qué se diferencia linear de radial y conic
Preguntas frecuentes
¿Cuál es la diferencia entre gradientes lineales, radiales y cónicos?
Los gradientes lineales transicionan a lo largo de una línea recta en un ángulo elegido, los radiales se expanden hacia afuera desde un punto central como un círculo o elipse, y los cónicos barren colores alrededor de un punto central como una rueda de color.
¿Los gradientes cónicos son compatibles con todos los navegadores?
Todos los navegadores principales actuales admiten gradientes cónicos, pero es una función CSS más nueva que los gradientes lineales o radiales, así que versiones muy antiguas de navegadores podrían no renderizarlos.
¿Qué obtengo como resultado?
La herramienta genera sintaxis CSS background lista para usar con tus colores, paradas y posiciones elegidos, que puedes pegar directamente en tu hoja de estilos.
¿En qué se diferencia repeating-linear-gradient de un linear-gradient normal?
Un linear-gradient normal estira su secuencia de colores exactamente una vez a lo largo de todo el elemento, mientras que repeating-linear-gradient repite esa misma secuencia de color stops de forma cíclica, generando un fondo de rayas o con patrón.
¿Se pueden superponer varios degradados como fondo?
Sí, la propiedad background-image admite una lista de degradados separados por comas, y se superponen en capas del mismo modo que lo harían varias imágenes de fondo — el primero de la lista queda arriba del todo.