¿Qué es un degradado? Una guía clara sobre las mezclas de color

¿Qué es un degradado? En diseño, un degradado es un cambio suave y gradual de un color a otro sobre una superficie, como un azul profundo que se funde en violeta a lo largo de un póster. Mientras un relleno plano pinta todos los píxeles del mismo color, un degradado da a cada punto su propio color, calculado a partir de unos pocos colores que eliges y de dónde los colocas. Ese pequeño cambio es la razón por la que un degradado puede parecer luz, aire o profundidad, y también por la que es fácil que parezca barato.

Esta página cubre las partes de las que está hecho todo degradado, los tipos principales, dónde se usan los degradados y por qué volvieron. Cada sección enlaza a una guía más profunda cuando quieras el detalle.

Las partes de un degradado

Todo degradado, ya se dibuje en una herramienta de diseño, se escriba en CSS o lo renderice un motor de videojuegos, se reduce a los mismos pocos ingredientes. En cuanto sabes nombrarlos, puedes describir cualquier degradado con la precisión suficiente para que otra persona lo reconstruya.

Las posiciones de las paradas importan tanto como los colores. Mueve la parada central del 50% al 65% y los mismos tres colores cuentan otra historia: más sombra, un amanecer más tardío. Si quieres entender la dirección en detalle, lee hacia dónde debe ir un degradado.

Degradados suaves y escalonados

Un degradado suave se mezcla de forma continua entre paradas. Un degradado escalonado o de paradas duras coloca dos paradas en la misma posición, así que el color salta en lugar de mezclarse. Las paradas duras crean rayas, banderas, barras de progreso y atardeceres retro; siguen siendo degradados, solo que con la mezcla desactivada en esos puntos.

Los degradados suaves tienen un punto débil: las pantallas muestran un número limitado de tonos, así que una mezcla muy sutil puede romperse en rayas visibles. Ese problema tiene su propia guía, banding en degradados.

Los tipos principales de degradado

El tipo es la forma del recorrido que sigue el color. Cuatro tipos cubren casi todo lo que te vas a encontrar, y tipos de degradados muestra cada uno con código en vivo.

• Lineal: el color cambia a lo largo de una línea recta con un ángulo. El caballo de batalla para fondos, botones y banners. Mira degradados lineales en CSS.
• Radial: el color se expande hacia fuera desde un punto en un círculo o una elipse, como un foco o un brillo. Mira degradados radiales.
• Cónico: el color gira alrededor de un punto central, como la aguja de un reloj. Va bien para ruedas de color, gráficos circulares y brillos. Mira degradados cónicos.
• De malla: varios puntos de color se mezclan a la vez en dos dimensiones, así que el resultado parece orgánico y pictórico. Mira degradados de malla.

Cómo se mezclan los colores: la parte que la gente se salta

Entre dos paradas, el software tiene que inventar cada color intermedio. Cómo lo hace depende del espacio de color. La mayoría de las herramientas y el CSS antiguo mezclan en sRGB, que combina los valores de rojo, verde y azul en línea recta. Es rápido, pero puede pasar por grises apagados, sobre todo entre colores opuestos como el azul y el amarillo.

Los espacios de color más nuevos, como OKLab y OKLCH, se basan en cómo percibimos la luminosidad y el tono, así que las mezclas se mantienen más luminosas y uniformes. En CSS puedes pedirlos directamente, y la diferencia salta a la vista. La historia completa, y las soluciones, están en degradados turbios.

.sky {
  /* default: blended in sRGB, passes through grey */
  background: linear-gradient(90deg, #0000ff, #ffff00);
}

.sky-better {
  /* blended in OKLCH, travels round the hue wheel through teal */
  background: linear-gradient(90deg in oklch, #0000ff, #ffff00);
}

Dónde se usan los degradados

Los degradados se ganan su sitio allí donde una superficie necesita sentirse iluminada o viva sin añadir una foto. Los usos más comunes son fondos para publicaciones en redes y webs, iconos de apps, botones y destacados en interfaces, packaging, pósteres e identidades de marca que usan una mezcla como otras marcas usan un solo color. Para la parte de identidad, mira branding con degradados.

Por qué volvieron los degradados

Los degradados estaban por todas partes en las interfaces brillantes de los años 2000, y cayeron en desgracia cuando el diseño plano se adueñó de las pantallas a principios de la década de 2010. Volvieron de una forma más discreta: menos biseles y reflejos falsos, más mezclas suaves de dos o tres colores. Las pantallas de alta resolución ayudaron, porque el color suave luce mejor en pantallas densas, y las marcas que buscaban algo más distintivo que un solo tono plano encontraron espacio en las mezclas. La visión de conjunto está en la historia de los degradados.

Hoy los degradados más interesantes van más allá del color. El grano, la textura y el movimiento lento hacen que una mezcla se sienta como un material y no como un ajuste predeterminado, que es el tema de degradados con grano y textura en degradados.

Si prefieres partir de una mezcla terminada en lugar de construirla desde cero, el Mercado tiene miles de Marks: recetas de degradado completas con color, material, grano y luz con las que puedes diseñar gratis.