Materiales de degradado: seda, aurora, grano y los demás

Los materiales de degradado son lo que hace que un degradado parezca algo y no una simple mezcla entre dos colores. Un material es la estructura que llena el color: un brillo direccional en Seda, cortinas de luz en Aurora, floraciones suaves en Malla, arena en Limo, vetas en el mármol. Cada Mark de Gradiently apila hasta tres de ellos y luego añade luz, grano y movimiento, y por eso dos Marks con la misma paleta pueden no parecerse en nada.

Qué es un material

Piensa en la paleta como la pintura y en el material como la superficie sobre la que se aplica. Vierte el mismo azul marino, turquesa y naranja sobre seda, cristal esmerilado o papel hecho a mano y obtendrás tres objetos distintos. En un Mark, cada material toma los colores de la paleta del propio Mark, así que cambiar el material cambia el carácter sin cambiar los colores.

Las catorce familias de materiales

Gradiently agrupa sus materiales en familias según a qué se parecen. Los nombres de abajo son materiales reales que encontrarás en el Mercado; cada familia contiene muchos más.

Seda, aurora y malla

Estos tres son por los que más pregunta la gente. Seda es un brillo direccional sobre hilos finos: elegante, algo formal, en su salsa con la belleza y la moda. Aurora son cortinas de luz que suben desde un borde brillante hacia un cielo oscuro, espectacular sobre un fondo vacío. Malla son floraciones suaves de color que se funden entre sí, el degradado moderno clásico, amable y versátil. Degradados seda, degradados aurora y degradados de malla tienen cada uno su propia guía con CSS.

Grano, papel e impresión

La familia Grano hace que una pantalla parezca impresa. Fibra es papel hecho a mano con fibras largas y alguna mota, Riso es una impresión a dos tintas, Película es grano de película y Tramado escalona el color en píxeles. Van bien con comida, artesanía, libros y todo lo que deba parecer hecho a mano. Además ocultan las bandas, las franjas que aparecen en los degradados suaves, como explica degradados con grano.

Cómo se apilan las capas

Un Mark tiene una capa base y hasta dos más encima. Cada capa superior tiene su propia opacidad y un modo de fusión (normal, trama, multiplicar, superponer o suave), la misma idea que las capas de un editor de fotos. Una receta habitual es una base amplia como Malla o Bruma para el campo de color, una capa estructural como Lino o Semitono para la textura y una capa de luz como Halo o Fuga para el foco.

.card {
  background:
    /* top layer: a light, screened over the rest */
    radial-gradient(circle at 75% 20%, rgb(255 214 170 / 0.55) 0%, transparent 40%),
    /* middle layer: a fine stripe for texture */
    repeating-linear-gradient(90deg, rgb(255 255 255 / 0.05) 0 2px, transparent 2px 6px),
    /* base layer: the colour field */
    linear-gradient(160deg, #1b2a3a 0%, #2f5d62 60%, #5e8b7e 100%);
  background-blend-mode: screen, overlay, normal;
}

Luz, grano y movimiento

Dentro de cada capa, unos pocos ajustes cambian cómo se comporta el material: su escala, cuánto se deforma, cuánto detalle fino muestra, con qué intensidad se ilumina, cuánto grano lleva encima y cuánto se mueve. La misma Seda puede ser un brillo apretado e intenso o una caída amplia y tenue. El movimiento se comparte en todo el Mark, con su propia velocidad y deriva, así que las capas se mueven juntas y no unas contra otras.

El detalle y las palabras compiten, por eso los Marks calman por sí solos el detalle cargado cerca del texto. Un Mark sabe dónde están las palabras: su zona más tranquila se coloca detrás del texto y los colores cerca de las letras se oscurecen o se aclaran, así que incluso un material con textura mantiene legible tu titular.

Cómo elegir un material

Pregúntate de qué está hecha tu marca. Una panadería es harina, papel y luz cálida, así que Fibra o Aguada. Un estudio que vende software es cristal y luz limpia, así que Esmerilado o Prisma. Después pregúntate con qué frecuencia vas a publicar sobre él: cuanto más a menudo, más tranquilo debería ser. Cómo elegir el Mark adecuado recorre el resto de la decisión, y el Mercado te permite filtrar directamente por material.