Los gradientes han entrado y salido de moda más de una vez, pero uno bien hecho nunca se ve anticuado. La diferencia entre un gradiente que se siente moderno y uno que parece un preajuste por defecto depende de un puñado de decisiones de color. Este artículo reúne las reglas que los diseñadores realmente aplican.
Elige colores vecinos
Los gradientes más seguros y elegantes mezclan colores que están cerca en la rueda cromática: azul a verde azulado, naranja a rosa, morado a azul. El ojo los lee como un solo ambiente que cambia lentamente. Los colores muy alejados, como el rojo y el verde, suelen producir una franja gris pardusca en el centro, porque la mezcla pasa por un punto medio apagado.
Si quieres un contraste de mucha energía, hazlo a propósito y añade una parada intermedia para guiar el camino por colores más brillantes.
Varía la luminosidad y la saturación, no solo el tono
Un gradiente entre dos colores del mismo brillo puede verse plano. Elige un color algo más claro que el otro. Un cambio suave de luminosidad da al gradiente la sensación de luz cayendo sobre una superficie, lo que resulta natural. A menudo puedes lograr un gradiente agradable con un solo tono moviéndote entre un matiz más claro y uno más oscuro.
Controla el punto medio
Por defecto, los colores se mezclan de manera uniforme, así que el punto medio queda exactamente a la mitad. Mover una parada cambia el equilibrio. Colocar el segundo color antes hace que domine, mientras que una posición tardía da más espacio al primero. Para un aspecto más orgánico, añade una tercera parada alrededor del 40 al 60 por ciento con un color algo más brillante o más saturado que el que daría la mezcla directa.
Evita el centro apagado
La zona grisácea aparece cuando la mezcla pasa por colores de baja saturación. Dos arreglos prácticos:
- Inserta una parada extra con un color saturado entre los dos extremos.
- Elige colores extremos con saturación y luminosidad similares.
Algunas versiones modernas de CSS permiten elegir el espacio de color usado en la interpolación, por ejemplo linear-gradient(in oklch, ...), que mantiene las mezclas más vivas que la mezcla tradicional en sRGB. Si el soporte de tu navegador lo permite, vale la pena probarlo en gradientes que cruzan la rueda cromática.
Usa gradientes sutiles en áreas grandes
En fondos grandes bastan diferencias pequeñas. Un gradiente entre dos tonos que difieren solo de 5 a 10 por ciento en luminosidad aporta profundidad sin distraer del contenido. Los gradientes saturados y de alto contraste funcionan mejor en lugares pequeños y deliberados, como una forma hero, una insignia o un botón de llamada a la acción.
Cuidado con el banding
Los gradientes suaves sobre un área grande pueden mostrar franjas visibles, llamadas banding, sobre todo en pantallas de baja calidad y en tonos oscuros. Añadir una textura de ruido muy ligera, o evitar transiciones largas entre colores casi idénticos, lo disimula.
Mantén el texto legible
El texto sobre un gradiente debe seguir siendo legible en cada punto que tenga debajo. Comprueba el contraste en las zonas más clara y más oscura del área detrás del texto, no solo en el promedio. El texto blanco sobre un gradiente que se desvanece hacia un amarillo pálido fallará en el extremo amarillo. Una capa oscura semitransparente o un gradiente que se mantenga dentro de un rango más estrecho de luminosidad resuelve la mayoría de los problemas. Puedes verificar un par de colores con un verificador de contraste.
Ángulos y dirección
Un gradiente diagonal, de unos 135 grados, tiende a sentirse dinámico y moderno. Los gradientes verticales sugieren un horizonte o iluminación desde arriba y transmiten calma. Los horizontales recuerdan más a una cinta o a un indicador de progreso. Mantén la dirección consistente en todo el diseño, porque los ángulos mezclados hacen que una interfaz parezca desordenada.
Combínalo con otros efectos
- Superpón un gradiente radial suave sobre uno lineal para crear un punto de luz brillante.
- Añade una capa fina de ruido o grano con baja opacidad para una sensación táctil y premium.
- Combina un fondo con gradiente con formas planas simples y mucho espacio en blanco, para que el gradiente sea el único elemento expresivo.
Construye y compara
Experimenta con algunas combinaciones en el generador de gradientes CSS. Empieza con dos colores vecinos, ajusta el ángulo, añade una parada intermedia solo si hace falta y usa el botón de colores aleatorios cuando quieras inspiración. Copia el CSS cuando te guste el resultado y pruébalo con el texto y los componentes reales que irán delante. Los gradientes suaves e intencionados envejecen bien, mientras que los estridentes anuncian el año en que se hicieron.