Generador de degradados CSS
Diseña un degradado CSS lineal, radial o cónico con hasta seis colores, ajusta el ángulo y la posición de cada parada viendo el resultado en directo, y copia el código para pegarlo en tu hoja de estilos.
Cómo usar el generador
- Elige el tipo: lineal (los colores avanzan en una dirección), radial (desde un centro hacia fuera) o cónico (girando alrededor de un punto, como una ruleta).
- Ajusta los colores y su posición en porcentaje. Puedes añadir hasta seis paradas o quitar las que sobren.
- Mueve el ángulo o el centro y comprueba el resultado en la vista previa.
- Copia el CSS. Incluye una línea de respaldo con un color sólido para navegadores muy antiguos o para cuando el degradado no carga.
Si buscas colores que combinen, parte de una paleta análoga o monocromática: los degradados entre tonos vecinos suelen quedar más limpios que entre complementarios.
Cómo funciona la sintaxis
linear-gradient(ángulo, color1 posición1, color2 posición2, …)
El ángulo indica hacia dónde avanza el degradado: 0deg hacia arriba, 90deg hacia la derecha, 180deg hacia abajo. Las posiciones marcan dónde el color es puro; entre dos paradas el navegador interpola el color de forma lineal.
radial-gradient(forma at posición, colores…) · conic-gradient(from ángulo at posición, colores…)
En el cónico, las posiciones en porcentaje son fracciones de la vuelta completa: 25 % equivale a 90°. Con paradas duplicadas se consiguen gráficos de sectores sin JavaScript: conic-gradient(#0b7a62 0 40%, #f7d154 40% 100%) dibuja un 40 % verde y un 60 % amarillo.
Ejemplos útiles
| Efecto | Código |
|---|---|
| Fondo de cabecera suave | linear-gradient(135deg, #0b7a62, #3ccfa5) |
| Oscurecer una foto para poner texto | linear-gradient(transparent, rgba(0,0,0,.7)) |
| Viñeta radial | radial-gradient(circle, transparent 60%, rgba(0,0,0,.5)) |
| Rayas diagonales | repeating-linear-gradient(45deg, #eee 0 10px, #fff 10px 20px) |
| Rueda de color | conic-gradient(red, yellow, lime, aqua, blue, magenta, red) |
Consejos y errores comunes
- La «zona gris» en el centro: al mezclar colores complementarios (por ejemplo azul y naranja) el punto medio sale grisáceo, porque la interpolación se hace en sRGB. Añade una parada intermedia más saturada, o calcula ese punto con el mezclador de colores. En navegadores modernos también puedes escribir
linear-gradient(in oklch 90deg, …). - Bandas visibles (banding): en degradados muy largos y con colores parecidos pueden verse escalones. Aumentar ligeramente el contraste entre extremos lo reduce.
- Texto sobre degradado: mide el contraste en el extremo más desfavorable con el comprobador de contraste.
- Combínalo con otras propiedades: un degradado con esquinas redondeadas y una sombra suave es la receta típica de una tarjeta o botón moderno.
Los degradados CSS no pesan nada: no descargan imágenes y se adaptan a cualquier tamaño y densidad de pantalla, lo que ayuda a la velocidad de carga de tu web.
Preguntas frecuentes
¿Cómo se hace un degradado en CSS?
Con la propiedad background y una función de degradado, por ejemplo background: linear-gradient(135deg, #0b7a62, #f7d154);. No necesitas imágenes: el navegador lo dibuja a cualquier tamaño.
¿Qué ángulo corresponde a cada dirección?
0deg va de abajo hacia arriba, 90deg de izquierda a derecha, 180deg de arriba hacia abajo (el valor por defecto) y 270deg de derecha a izquierda. También puedes escribir to right o to bottom right.
¿Cómo hago un corte nítido entre dos colores?
Pon dos paradas con la misma posición: linear-gradient(90deg, red 50%, blue 50%) crea dos franjas sin transición. Es la base de rayas y banderas en CSS.
¿Se puede animar un degradado?
Las funciones de degradado no se interpolan directamente en todos los navegadores. Lo habitual es animar background-position de un degradado más grande que el elemento o registrar variables con @property.