Lineal, radial, cónico y de malla: todos los tipos de degradado

Hay cuatro tipos de degradados principales: lineal, radial, cónico y de malla. Los degradados lineales cambian de color a lo largo de una línea recta, los radiales se expanden hacia fuera desde un punto, los cónicos giran alrededor de un centro como la aguja de un reloj y los de malla mezclan varios puntos de color a la vez en dos dimensiones. A su alrededor hay algunas variantes útiles: los degradados repetidos, los degradados libres y el grano, que es una textura superpuesta y no un tipo en sí.

Abajo, cada tipo tiene un ejemplo en vivo que puedes copiar, una nota sobre para qué sirve y un enlace a su guía completa. Si empiezas de cero, qué es un degradado explica primero las paradas, las posiciones y los espacios de color.

Degradados lineales

Un degradado lineal recorre una línea recta con el ángulo que elijas. En CSS la dirección por defecto es de arriba abajo, 0deg apunta hacia arriba y los ángulos giran en el sentido de las agujas del reloj, así que 90deg va de izquierda a derecha y 135deg va desde la esquina superior izquierda hacia la inferior derecha. Es con diferencia el tipo más común, porque es predecible, llena cualquier rectángulo con limpieza y sugiere una luz que entra por un lado.

Usa degradados lineales para fondos de páginas y publicaciones, botones, banners y todo lo que tenga que repetirse o escalar de forma predecible. La sintaxis y sus detalles están en degradados lineales en CSS, y cómo elegir la dirección se explica en ángulo del degradado.

Degradados radiales

Un degradado radial parte de un punto y se expande hacia fuera como un círculo o una elipse. Mover ese punto fuera del centro es el truco que lo hace parecer luz: un brillo desde arriba a la izquierda se lee como una lámpara, un sol o un reflejo en una superficie curva. Los degradados radiales son también la base de casi todas las viñetas suaves y los efectos de foco.

Usa degradados radiales para brillos, focos, viñetas, esferas y todo lo que deba parecer iluminado desde un punto. Mira degradados radiales para las palabras clave de tamaño como closest-side y farthest-corner.

Degradados cónicos

Un degradado cónico cambia de color a medida que giras alrededor de un punto central, en lugar de alejarte de él. Imagina el barrido de la aguja de un reloj. Eso lo convierte en la opción natural para ruedas de color, gráficos circulares, anillos de carga y brillos angulares como el metal cepillado o el destello irisado de una lámina holográfica.

Usa degradados cónicos para ruedas, gráficos, brillos e irisaciones. La guía completa es degradados cónicos, y el aspecto de lámina está en degradados holográficos.

Degradados repetidos

Cada uno de los tres tipos de CSS tiene una versión repetida. En lugar de estirar una transición por toda la forma, repite una transición corta una y otra vez. Con paradas duras obtienes rayas, anillos y rayos de sol nítidos sin ningún archivo de imagen.

Degradados de malla y libres

Un degradado de malla coloca color en varios puntos de una superficie y los mezcla todos en dos dimensiones. Illustrator llama a su versión de puntos y cuadrícula malla de degradado, y a su versión más suelta degradado de forma libre. En ambos casos, el resultado no tiene una única dirección, y por eso parece orgánico, como la luz a través del agua o la pintura que se ha corrido. CSS no tiene un tipo de malla, pero puedes imitarlo de forma convincente apilando degradados radiales suaves sobre un color base.

.mesh {
  background-color: #0b1026;
  background-image:
    radial-gradient(at 18% 22%, #7c3aed 0px, transparent 55%),
    radial-gradient(at 82% 18%, #0ea5e9 0px, transparent 50%),
    radial-gradient(at 70% 85%, #f472b6 0px, transparent 55%),
    radial-gradient(at 25% 80%, #14b8a6 0px, transparent 50%);
}

Usa degradados de malla para fondos de cabecera, fondos de pantalla, portadas de discos y campos de marca que deban sentirse vivos. Los escollos, sobre todo el color turbio y las bandas, están en degradados de malla.

Grano y textura: la capa de encima

El grano no es un tipo de degradado, pero cambia cómo se lee cada tipo. Una capa fina de ruido oculta las rayas que pueden mostrar las transiciones suaves en pantalla, y hace que el color digital parezca impreso o cinematográfico. Otros materiales, como el papel, el vidrio y la seda, hacen el mismo trabajo con otra voz. Mira degradados con grano para saber cuánto añadir.

Qué tipo de degradado usar

Si quieres un campo terminado con el color, la luz y el grano ya equilibrados, eso es un Mark, y puedes diseñar gratis con cualquier Mark del Mercado.