Anatomía de un degradado CSS
Un degradado en CSS no es una imagen: es una función que el navegador pinta al vuelo. La forma más común es background: linear-gradient(135deg, #1e3a8a, #38bdf8); y cada pieza tiene su papel. El primer argumento (135deg) define la dirección; los siguientes son las paradas de color, los puntos por los que pasa la transición. El navegador interpola todos los píxeles intermedios, así que el resultado escala a cualquier tamaño de pantalla sin perder nitidez y pesa apenas unos bytes. Esta herramienta te evita memorizar la sintaxis: compones el degradado con controles visuales y copias el código exacto.
Lineal, radial y cónico: tres geometrías
- Lineal: el color avanza en línea recta según el ángulo. Con 0deg sube de abajo arriba, con 90deg va de izquierda a derecha y con 180deg baja de arriba abajo. Es el rey de fondos de sección, botones y cabeceras.
- Radial: radial-gradient(circle, #fbbf24, #b45309) parte de un punto y se expande en círculos concéntricos. Perfecto para focos de luz, halos y fondos con un centro de atención.
- Cónico: conic-gradient(from 0deg, red, yellow, red) gira el color alrededor de un centro, como las agujas de un reloj. Con él se hacen ruedas de color y gráficos de tarta sin una sola imagen. La herramienta genera los dos primeros, que cubren la inmensa mayoría de los casos reales.
Paradas de color: el control fino
Cada color del degradado puede llevar un porcentaje que fija dónde alcanza su intensidad plena. En linear-gradient(90deg, #f97316 20%, #0ea5e9 80%) el naranja se mantiene puro hasta el 20 % del recorrido y la transición ocurre solo entre el 20 % y el 80 %. Y hay un truco muy útil: si dos paradas comparten el mismo porcentaje, la transición desaparece y se produce un corte limpio. linear-gradient(90deg, #f97316 50%, #0ea5e9 50%) no es un degradado a la vista, sino dos bloques de color perfectamente definidos: así se dibujan rayas, banderas y barras de progreso solo con CSS.
Otro detalle de oficio: al mezclar dos colores muy alejados en el círculo cromático (un naranja y un azul, por ejemplo), la zona central del degradado puede pasar por un gris apagado y sucio. Se corrige añadiendo una parada intermedia con un tono puente o eligiendo colores más próximos entre sí.
Accesibilidad: texto sobre degradados
El error más repetido es comprobar el contraste del texto contra un solo extremo del fondo. Las pautas WCAG piden un ratio mínimo de 4,5:1 para texto normal y de 3:1 para texto grande, y ese mínimo debe cumplirse contra cada color que quede detrás de las letras. Si tu degradado va de un azul casi negro a un celeste pálido, el texto blanco brillará en un lado y desaparecerá en el otro. Tres soluciones prácticas: mantener los dos extremos en una franja de luminosidad parecida, interponer una capa semitransparente oscura entre fondo y texto, o situar el texto solo sobre la zona segura del degradado.
Trucos rápidos de diseñador
- Los degradados más elegantes usan el mismo tono con distinta luminosidad (un azul oscuro hacia un azul claro) en lugar de dos colores sin relación.
- La diagonal 135deg da profundidad sin resultar agresiva; es la dirección más socorrida para fondos de héroe.
- Para botones, aclara el color de marca unos puntos de luminosidad y úsalo como segundo color: el relieve es sutil y coherente.
- Ajusta los colores de partida con el conversor de color HEX, RGB y HSL: trabajar la luminosidad en HSL hace que las parejas salgan solas.
Y si sigues con las manos en el código, quizá te sirvan escapar HTML o el formateador de JSON. Más utilidades en herramientas de archivos.