Generador CSS
Generador de degradados CSS
Lineales, radiales y cónicos. Mueve los colores, ajusta la opacidad y llévate el CSS listo para pegar. Todo pasa en tu navegador, en tiempo real.
Vista previa
CSS generado
¿Buscas la paleta antes que el degradado? Empieza por el generador de paletas.
Los tres tipos de degradado, y cuándo usar cada uno
El lineal avanza en línea recta según un ángulo. Es el que usarás el 90 % de las veces: fondos de sección, botones, tarjetas. El radial se expande desde un punto en círculo o elipse, y sirve para simular un foco de luz o una viñeta que concentra la atención en el centro. El cónico gira alrededor de un punto como las agujas de un reloj: es el que hace posibles las ruedas de color, los gráficos de sectores y los brillos metálicos, todo en CSS puro.
El problema de las franjas
Si tu degradado se ve con escalones en vez de una transición suave, no es culpa tuya: es bandeado. Ocurre cuando dos colores muy parecidos se reparten sobre una superficie grande y la pantalla no tiene suficientes tonos intermedios para dibujar el salto. Tres formas de arreglarlo, de menos a más esfuerzo: añadir una parada de color intermedia, aumentar el contraste entre los extremos, o superponer una textura de ruido muy sutil que rompa las bandas.
Degradados en texto y en bordes
Un degradado no está limitado al fondo. Para pintar texto, se aplica
como fondo y se recorta con background-clip: text junto a
color: transparent — es exactamente la técnica que usa el nombre "Lienzo"
en la cabecera de este sitio. Para bordes, la vía más limpia es
border-image con el degradado, aunque también funciona un contenedor con
el degradado de fondo y un hijo opaco encima que deje ver solo el contorno.
Un consejo de contraste
Si vas a poner texto encima, comprueba el contraste contra el punto más claro y el más oscuro del degradado, no contra el promedio. Un degradado que va de violeta a turquesa puede pasar el mínimo de accesibilidad en un extremo y fallar en el otro. La herramienta de colores en vivo te da los ratios WCAG al instante, y en la guía de teoría del color está explicado por qué 4.5:1 es el número que importa.
Preguntas frecuentes
¿Cuál es la diferencia entre un degradado lineal, radial y cónico?
El lineal avanza en línea recta según un ángulo, y es el más común para fondos y botones. El radial se expande en círculo o elipse desde un punto, útil para focos de luz y viñetas. El cónico gira alrededor de un centro como las agujas de un reloj, y es el que se usa para ruedas de color, gráficos de sectores y efectos metálicos.
¿Por qué mi degradado se ve con bandas o franjas?
El bandeado aparece cuando dos colores muy parecidos se reparten en una superficie grande: la pantalla no tiene suficientes tonos intermedios y se ven escalones. Se corrige añadiendo una parada de color intermedia, aumentando el contraste entre los colores, o superponiendo una textura de ruido muy sutil.
¿Qué ángulo debo usar en un degradado lineal?
En CSS, 0 grados va de abajo hacia arriba y los grados avanzan en sentido horario: 90° es de izquierda a derecha y 180° de arriba hacia abajo. Los ángulos diagonales, entre 120° y 135°, suelen verse más naturales en fondos porque imitan la caída de la luz.
¿Puedo usar degradados en textos y bordes?
Sí. Para texto se aplica el degradado como fondo y se recorta con
background-clip: text junto a color: transparent. Para bordes
se usa border-image con el degradado, o un contenedor con el degradado de
fondo y un elemento interior opaco que deja ver solo el contorno.