La versión corta
- La mayoría de los errores de diseño con degradados vienen de pocas causas: colores que pasan por el gris, demasiadas paradas, bandas visibles, poco contraste del texto y preajustes sin tocar.
- Un degradado entre dos tonos opuestos suele volverse gris en el medio en sRGB, y se arregla con una parada intermedia o interpolando en OKLCH.
- Las bandas se ven como rayas visibles en degradados lentos, oscuros o sutiles, y una ligera capa de grano o de tramado suele ocultarlas.
- El texto sobre un degradado exige comprobar el contraste en su peor punto y no en el mejor, porque el fondo cambia bajo cada letra.
- Un degradado se ve caro cuando tiene una estructura clara, de tres a cinco colores emparentados, una textura coherente y una razón de ser.
En esta página
Los errores de diseño con degradados más comunes son los medios grises y turbios, demasiados colores, bandas visibles, texto que desaparece, paradas duras, exceso de arcoíris, grano que no encaja, preajustes sin tocar y un aspecto idéntico al de todos los demás. Cada uno tiene una causa concreta y una solución concreta. Ninguno necesita una herramienta nueva, solo mirar de cerca lo que hace la mezcla entre sus paradas.
Esta guía recorre los nueve en el orden en que sueles encontrarlos, de las matemáticas del color a la identidad. Si quieres empezar por lo básico, lee qué es un degradado.
Error 1: un medio gris y turbio
Mezcla dos colores de lados opuestos del círculo cromático, como azul y naranja, y el punto intermedio en sRGB es un marrón grisáceo apagado. El navegador promedia los canales rojo, verde y azul, y el promedio de dos complementarios se acerca al neutro. El resultado parece una mancha entre dos colores buenos.
Se arregla pasando la mezcla por un color que esté entre los dos en el círculo, o interpolando en un espacio perceptual. Los degradados turbios tratan ambos métodos, y OKLCH en CSS explica la sintaxis.
Error 2: demasiados colores
Cada color que añades es otra transición que el ojo tiene que leer. Pasadas cuatro o cinco paradas, un degradado deja de leerse como luz que cae sobre una superficie y se lee como un gráfico de rayas. Además, se vuelve imposible de reproducir igual dos veces.
Elige una familia de tono, añade un pariente más claro y otro más oscuro y admite un acento como máximo. El enfoque de los colores análogos es el punto de partida más seguro.
Error 3: rayas de bandas
Las bandas son la escalera de pasos visibles que se ve en un degradado lento, sobre todo en uno oscuro. Un canal de 8 bits tiene 256 niveles, y cuando una mezcla recorre una distancia corta de color a lo largo de un área ancha, cada nivel se convierte en una banda de varios píxeles. La compresión JPEG fuerte lo empeora.
.hero {
position: relative;
background: linear-gradient(160deg, #0b1020 0%, #1e1b4b 60%, #312e81 100%);
}
.hero::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
opacity: 0.08;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}El grano funciona porque reparte los píxeles entre niveles vecinos, y el borde entre dos bandas desaparece. Exporta en PNG o en JPEG de alta calidad. Las bandas en degradados explican con detalle los ajustes de exportación.
Error 4: texto que desaparece sobre el degradado
Un degradado cambia bajo cada letra. La tipografía blanca puede leerse de maravilla en el extremo oscuro de una mezcla y desaparecer en el extremo claro de la misma línea. Quien diseña comprueba el titular donde se ve mejor, y quien lee lo encuentra donde se ve peor.
El fondo atraviesa las palabras, así que algunas letras quedan sobre color brillante.
El mismo diseño con la parte calma del fondo movida detrás del texto.
Comprueba el contraste en el punto más brillante detrás del texto claro, o en el más oscuro detrás del texto oscuro. Las WCAG piden 4,5:1 para el texto normal y 3:1 para el texto grande; el contraste de color explica los números y el texto sobre degradado trata la colocación.
Error 5: paradas duras y accidentales
Cuando dos paradas quedan a pocos puntos porcentuales de distancia, la mezcla salta de un color al siguiente y dibuja una línea que nadie pidió. Las paradas duras son útiles a propósito, para rayas y gráficos, pero una costura accidental se lee como un error.
Error 6: exceso de arcoíris
Un espectro completo es lo más ruidoso que puede hacer un degradado, y rara vez dice algo de la marca que lo usa. Además arrastra a la vez las asociaciones de todos los tonos. Si quieres un arcoíris, usa un arco corto y controla la luminosidad. Los degradados arcoíris muestran versiones con buen gusto.
Error 7: grano que no encaja
Evita
- Grano grueso en el post, fino en la historia y ninguno en las diapositivas
- Grano aplicado sobre textos y logotipos
- Grano tan fuerte que parece una lente sucia
- Ampliar una textura de grano hasta que cada mota es una mancha
Haz
- Un solo tamaño e intensidad de grano en todos los formatos
- Grano solo en la capa de fondo
- Lo justo para romper las bandas y dar textura
- Grano generado al tamaño de exportación, sin estirar
La textura es parte de un estilo, así que un grano incoherente hace que un conjunto de diseños parezca venir de tres sitios. Los degradados granulados explican cuánto usar.
Error 8: publicar el preajuste sin tocar
La mayoría de las herramientas ofrecen las mismas mezclas de dos colores a 135 grados. Se ven bien, y por eso están en todas partes. Un preajuste es un punto de partida: cambia un color, añade una tercera parada, ajusta la dirección a la composición y añade un material. Usar un generador de degradados repasa esas ediciones.
Error 9: parecerse a todos los demás
El último error es el caro. Un degradado bien hecho pero idéntico en espíritu al de todos los competidores no ayuda al reconocimiento. La solución es la coherencia más algo difícil de copiar, como un material, una forma de moverse o una forma de dejar espacio a las palabras. El degradado como marca explica cómo hacerlo tuyo.
| Error | Solución rápida |
|---|---|
| Medio gris | Parada intermedia o interpolación en OKLCH |
| Demasiados colores | Una familia de tono más un acento |
| Bandas | Grano fino, exportación en PNG o de alta calidad |
| Texto ilegible | Comprobar el contraste en el peor punto |
| Paradas duras | Separar las paradas, salvo que el borde sea intencionado |
| Exceso de arcoíris | Usar un arco corto del espectro |
| Grano que no encaja | Una sola receta de grano para todos los formatos |
| Preajuste sin tocar | Cambiar color, paradas, dirección y textura |
| Igual que todos | Añadir un material y mantenerlo coherente |
Preguntas frecuentes
¿Por qué mi degradado se ve gris en el medio?
Los colores de lados opuestos del círculo se promedian hasta un casi neutro en sRGB. Añade una parada intermedia con un tono situado entre ellos, o interpola en OKLCH.
¿Cómo evito las bandas en un degradado?
Añade una capa de ruido fino o grano con poca opacidad, evita la compresión JPEG fuerte y da a los degradados oscuros un rango más amplio de luminosidad por el que moverse.
¿Cuántos colores debe tener un degradado?
Normalmente de dos a cuatro colores emparentados, con un acento como máximo. Pasadas cinco paradas, la mayoría de los degradados empiezan a verse recargados.
¿Cómo hago legible el texto sobre un degradado?
Coloca el texto sobre la parte más calma del fondo y comprueba el contraste donde el fondo se acerque más en luminosidad a tu texto. Apunta a 4,5:1 para el texto normal y 3:1 para el grande.
¿Los preajustes de degradado son malos?
No, pero los comparte mucha gente. Trata un preajuste como un punto de partida y cambia sus colores, paradas, dirección y textura antes de usarlo.
Escrito por Gradiently
El equipo detrás de Gradiently, una herramienta de diseño creada en torno a los Marks: degradados vivos que hacen que todo lo que diseñas parezca tuyo.
Ver nuestro perfil
