background: linear-gradient(135deg, #7c3aed 0%, #d946ef 50%, #0ea5e9 100%);Sobre el generador de degradados CSS
Crea degradados CSS de forma visual y copia el código generado. Añade y mueve paradas de color, cambia entre degradado lineal y radial, y ajusta el ángulo mientras ves el resultado en vivo. Escribir la sintaxis de un degradado a mano obliga a adivinar las posiciones de las paradas; hacerlo de forma visual deja clara la relación.
Cómo usar el generador de degradados CSS
-
Elige lineal o radial
Un degradado lineal mezcla los colores a lo largo de un eje recto; uno radial se expande desde un punto central. Con «Lineal» puedes ajustar además el ángulo.
-
Añade y coloca las paradas de color
Añade paradas con «+ Añadir», elige el color de cada una y mueve su control deslizante para decidir dónde da paso un color al siguiente.
-
Copia el CSS
Copia la propiedad background generada con «Copiar CSS» y pégala directamente en tu hoja de estilos.
Casos de uso
Diseñar el fondo de una cabecera
Compón un degradado de varias paradas para la cabecera de una landing page y cópialo directamente en tu CSS.
Dar estilo a botones y tarjetas
Crea un degradado sutil de dos paradas que aporte profundidad sin el peso de una imagen de fondo.
Aprender la sintaxis de los degradados
Mueve los controles y observa cómo cambia el CSS generado para entender cómo se traducen el ángulo y las posiciones de las paradas en el código.
Preguntas frecuentes
¿Cómo funciona el ángulo en un degradado lineal?
En CSS, 0deg apunta hacia arriba y los ángulos aumentan en el sentido de las agujas del reloj, así que 90deg va de izquierda a derecha. No coincide con la convención matemática, y eso es una fuente habitual de confusión.
¿Los degradados CSS necesitan prefijos de navegador?
No. Todos los navegadores actuales admiten linear-gradient y radial-gradient sin prefijo. Los prefijos solo importan en versiones muy antiguas.
¿Se puede animar un degradado?
CSS no puede interpolar directamente entre dos degradados. Lo habitual es animar background-position sobre un degradado más grande que el elemento o hacer un fundido cruzado entre dos capas.
¿Por qué mi degradado se ve con bandas?
Las bandas aparecen cuando un degradado sutil se estira sobre una superficie grande con una profundidad de color limitada. Añadir paradas intermedias o una ligera capa de ruido reduce el efecto.
Herramientas relacionadas
Explora todas las herramientas online gratis de Tooly: todas funcionan en tu navegador y ninguna necesita cuenta.