Los degradados pasaron de hortera a elegante y de vuelta tantas veces que los diseñadores acabaron recelando de ellos. Pero un buen degradado es una de las formas más baratas de hacer que una interfaz plana parezca tener profundidad y luz. El problema es que la mayoría de los degradados fallan exactamente en un lugar —el medio— y ese fallo es tan común que enseñó a toda una generación de diseñadores a evitar la herramienta por completo. Una vez que entiendes por qué el punto medio se vuelve sucio, puedes corregirlo deliberadamente, y los degradados pasan a ser una parte fiable del kit en lugar de una apuesta. Aquí está el modelo mental y los recursos que de verdad uso.
Un degradado es un camino, no un par
El error oculto dentro de cada degradado sucio es pensar en él como dos colores. No lo es. Es un camino entre dos colores, y la pregunta que decide si se ve bien es: ¿qué ruta toma la mezcla para ir de A a B?
Cuando escribes un degradado CSS sencillo como linear-gradient(#3B82F6, #F59E0B) —un azul a un ámbar—, el navegador, por defecto, interpola en sRGB recorriendo una línea recta a través del espacio de color. Imagina la rueda de color vista desde arriba. El azul se sitúa en un lado, el ámbar más o menos enfrente. La línea recta entre ellos no sigue el borde colorido; corta directamente a través del centro gris desaturado. Así que el punto medio de ese degradado es un tono grisáceo triste y deslavado. Eso es el barro. No es un error de renderizado, es geometría. El camino más corto entre dos matices opuestos pasa por el gris.
Esta única idea lo reformula todo. Si la suciedad viene del camino, entonces corregirla significa controlar el camino. Hay tres palancas principales: elegir colores cuyo camino recto ya sea bueno, redirigir el camino con una parada intermedia, o cambiar el espacio de color para que el camino predeterminado se curve alrededor de la rueda en lugar de atravesarla.
Palanca uno: elige colores que se lleven bien entre sí
El degradado limpio más fácil es entre dos colores que están cercanos en matiz: un par análogo. Mezcla #3B82F6 (azul) con #6366F1 (índigo) y el camino en línea recta apenas abandona el vecindario azul-violeta, así que no hay zona gris en la que caer. El resultado es suave y rico de forma automática.
Por eso tantos degradados de sensación premium son sutiles: azul a morado, turquesa a verde, magenta a rojo-naranja. Son análogos, a menudo dentro de 30–60 grados de matiz, y varían más la luminosidad que el matiz. Un degradado que cambia sobre todo la luminosidad manteniendo el matiz casi constante es casi imposible de ensuciar. Si quieres un punto de partida seguro, construye primero un conjunto monocromático o análogo y luego mezcla dentro de él.
El corolario: los degradados complementarios (colores a 180 grados de distancia) son los más difíciles de mantener limpios, precisamente porque su camino recto atraviesa directamente el centro. Se pueden hacer, pero necesitan una de las dos palancas siguientes.
Palanca dos: añade una parada para dirigir el camino
Cuando de verdad quieres dos colores distantes —un azul y un naranja cálido, digamos, porque ambos son colores de marca—, no dejes que el navegador elija el punto medio. Elígelo tú con una tercera parada.
En lugar de linear-gradient(#3B82F6, #F59E0B), prueba a enrutar a través de un matiz que los una: linear-gradient(#3B82F6, #C084FC, #F59E0B). Esa parada media violeta tira del camino alrededor de la rueda a través del morado y el rosa en vez de a través del gris. Ahora la transición permanece saturada todo el recorrido. Has dibujado manualmente la ruta colorida que la línea recta se negaba a tomar.
Elegir el color puente es la parte de artesanía. Pregúntate en qué dirección alrededor de la rueda quieres viajar: de azul a ámbar puedes ir a través del morado/magenta (la ruta cálida) o a través del verde/turquesa (la ruta fría), y se sienten completamente distintas. La ruta cálida se lee como atardecer; la fría se lee como tropical. Elige a propósito. Puedes probar colores puente rápidamente generando una paleta en el generador de paletas de colores y soltando matices candidatos entre tus extremos.
Mantenlo en una, quizá dos, paradas intermedias. Cada parada extra es otro lugar donde el degradado puede desarrollar una costura o banda visible. Más paradas no es más lujo: la contención se lee como lujo.
Palanca tres: interpola en un espacio de color mejor
La solución moderna, y cada vez más mi predeterminada, es cambiar el espacio en el que ocurre la mezcla. CSS ahora te permite especificar el espacio de color de interpolación directamente: linear-gradient(in oklch, #3B82F6, #F59E0B).
OKLCH (y su primo LCH) es perceptualmente uniforme —pasos numéricos iguales se ven como pasos visuales iguales para tu ojo— y, fundamentalmente, cuando le pides que interpole el matiz, viaja alrededor de la rueda de matiz en lugar de atravesar el centro cartesiano. El efecto práctico es que ese mismo degradado de dos colores de azul a ámbar deja de hundirse en el gris y, en su lugar, recorre matices intermedios vivos de forma automática, sin parada manual. Los documentos de MDN sobre la interpolación de color de degradados cubren la sintaxis y las opciones shorter hue / longer hue, que te permiten controlar en qué dirección alrededor de la rueda va la mezcla.
Unas cuantas advertencias honestas. La compatibilidad de los navegadores con in oklch es buena en los navegadores actuales pero no universal, así que proporciona un respaldo estándar en sRGB (background: linear-gradient(#3B82F6, #F59E0B); antes de la línea OKLCH). Y OKLCH puede producir ocasionalmente un punto medio demasiado vivo para fondos sutiles: para un lavado de cabecera apenas perceptible, el sRGB simple entre colores cercanos sigue estando bien. Recurre a OKLCH cuando los extremos estén muy separados y quieras que se mantengan saturados.
Ángulos, tipos y dónde encajan los degradados
El camino es la parte difícil; el resto es cuestión de gusto, pero hay convenciones que vale la pena conocer.
- Lineal, de arriba abajo (`180deg`) imita la luz cenital y se siente natural en botones y tarjetas. Un botón que va de
#4F8EF7hacia abajo hasta#3B6FD4se lee como suavemente iluminado y tridimensional. - Diagonal (`135deg`) añade dirección y energía: el predeterminado para grandes fondos de cabecera porque se siente dinámico sin ser estridente.
- Los degradados radiales ponen un brillo suave en un punto; encantadores para destacar un elemento focal o fingir luz ambiental detrás de una tarjeta.
- Los degradados cónicos barren el matiz alrededor de un centro y son sobre todo para gráficas, indicadores de carga y ruedas de selección de color, más que para fondos.
Para la profundidad, mantén los dos colores cercanos en luminosidad y matiz: un degradado sutil (#1E293B a #0F172A) sobre una superficie oscura añade una riqueza que ningún relleno plano puede. Para el impacto, deja que el degradado sea el protagonista y dale espacio.
No te olvides del texto
Los degradados y el texto tienen una relación complicada. El contraste tiene que mantenerse a lo largo de toda la extensión del degradado, no solo donde casualmente soltaste el titular. Un título que pasa el contraste de la WCAG sobre la parte superior clara de un degradado puede fallar discretamente sobre la parte inferior más oscura. Prueba el punto más desfavorable, apóyate en las relaciones de contraste de la WCAG (4.5:1 para el texto del cuerpo, según las pautas del W3C), y ante la duda coloca una superposición sólida semitransparente detrás del texto para que su fondo sea predecible. O simplemente mantén los degradados en zonas decorativas y pon el texto sobre rellenos sólidos.
La versión corta
Deja de pensar en un degradado como dos colores y empieza a pensarlo como la línea entre ellos. Los centros sucios vienen de un camino recto a través del gris; los corriges eligiendo colores más amables, dirigiendo con una parada intermedia, o interpolando en OKLCH para que el camino se curve alrededor del borde. Domina eso y los degradados dejan de ser un riesgo y se convierten en una de las formas más eficientes de añadir luz, profundidad y personalidad a un trabajo plano. Saca dos colores de el generador de paletas de colores, suéltalos en un linear-gradient(in oklch, …) y observa cómo una mezcla que se habría vuelto gris se mantiene viva todo el recorrido.
Preguntas frecuentes
¿Por qué el centro de mi degradado se ve gris o sucio?
Cuando mezclas dos colores en el espacio sRGB predeterminado, la interpolación corta en línea recta a través de la rueda de color en lugar de rodearla. Si tus dos colores están muy alejados en matiz —digamos un azul y un amarillo—, esa línea recta pasa por el centro gris de baja saturación, así que el punto medio se desatura y se ve sucio. La solución es elegir colores más cercanos en matiz, añadir una parada de color intermedia para enrutar la mezcla alrededor de la rueda, o usar un espacio de color y un método de interpolación de matiz que viaje por el borde en lugar de por el centro.
¿Qué espacio de color debo usar para los degradados CSS?
Para la mayoría del trabajo moderno, interpolar en OKLCH o LCH produce degradados notablemente más suaves y uniformes que el sRGB predeterminado, porque esos espacios son perceptualmente uniformes: pasos numéricos iguales se ven como pasos visuales iguales. Te suscribes con una sintaxis como 'linear-gradient(in oklch, #3B82F6, #F59E0B)'. El sRGB predeterminado está bien para mezclas entre colores cercanos y similares, pero para degradados vivos de dos colores OKLCH evita el punto medio apagado y las zonas muertas. Comprueba siempre la compatibilidad del navegador y proporciona un respaldo estándar para navegadores antiguos.
¿Cuántas paradas de color debe tener un degradado?
Dos paradas bastan para una mezcla simple y sutil, y ahí es donde viven la mayoría de los degradados de interfaz limpios. Añade una tercera parada intermedia cuando tus dos extremos estén muy alejados en matiz y el punto medio automático se vea mal: la parada del medio te permite dirigir el camino a través de un color favorecedor en lugar de a través del gris. Más allá de tres o cuatro paradas, normalmente creas bandas y ruido visual en lugar de riqueza. Para los fondos, menos paradas con una transición suave casi siempre se ven más premium que un arcoíris recargado.
¿Qué ángulo debe tener un degradado lineal?
No hay un único ángulo correcto, pero algunas convenciones se leen como pulidas: un degradado de arriba abajo (180deg) se siente como una iluminación cenital natural, mientras que una diagonal en torno a 135deg añade sensación de dirección y energía sin ser caótica. Los degradados verticales sutiles funcionan bien para botones y tarjetas porque imitan cómo cae la luz. Los ángulos pronunciados o inusuales llaman la atención sobre el propio degradado, lo cual solo quieres cuando el degradado es el elemento protagonista y no un fondo discreto.
¿Son los degradados un problema de accesibilidad para el texto?
Pueden serlo, porque el contraste del texto debe mantenerse en toda el área que cubre el texto, no solo en un punto. Un encabezado sobre un degradado que va de claro a oscuro podría pasar el contraste arriba y fallar abajo. Los enfoques seguros son mantener el texto solo en la región del degradado donde el contraste se mantiene por encima del umbral de la WCAG, añadir una superposición sólida o semitransparente detrás del texto, o limitar los degradados a áreas decorativas sin texto. Prueba siempre el punto más desfavorable del degradado, no el promedio.
¿Quieres experimentar con los colores?
Prueba nuestro generador gratuito de paletas de color para encontrar tu armonía perfecta, con un comprobador de contraste WCAG integrado.
Abrir el generador