La versión corta
- Un degradado granulado es una mezcla de color con una capa fina de ruido aleatorio encima, de modo que la superficie se ve con textura y no perfectamente lisa.
- El grano oculta las bandas, porque la variación aleatoria rompe los pasos visibles entre los tonos limitados que puede mostrar una pantalla.
- El grano hace que el color digital se lea como físico, y recuerda a la película, a la impresión en risografía y al papel mate.
- El grano debe sentirse más que verse: empieza sutil, comprueba a tamaño completo y añade más solo donde la superficie sea grande y calma.
- En CSS, el método habitual es una capa de ruido SVG con feTurbulence colocada sobre el degradado con un modo de fusión y poca opacidad.
En esta página
Un degradado granulado es un degradado con una capa fina de ruido aleatorio por encima, de modo que el color tiene una textura visible en vez de una superficie digital perfectamente lisa. Se hizo popular por una razón práctica y otra visual: el grano oculta las rayas que suelen mostrar las mezclas lisas y hace que el color en pantalla parezca algo impreso, filmado o pintado. Bien hecho, casi nadie nota el grano. Solo pensarán que el color se ve mejor.
Por qué el grano hace que un degradado se vea mejor
Hay tres razones, y se suman.
- Oculta las bandas. La mayoría de las imágenes llevan 256 tonos por canal de color. Una mezcla suave sobre una zona grande tiene que ir saltando entre ellos, y el ojo distingue los pasos como rayas. El ruido aleatorio reparte los píxeles entre tonos vecinos, así que los bordes entre pasos desaparecen. Es la misma idea que el tramado. Mira las bandas en degradados.
- Añade tactilidad. Las cosas físicas nunca son perfectamente lisas. La película tiene grano, el papel tiene textura y la tinta impresa se asienta de forma irregular. Un poco de ruido toma prestadas esas asociaciones, y una mezcla digital plana empieza a sentirse como un material.
- Resiste mejor la compresión. Las plataformas sociales y las apps de mensajería recomprimen las imágenes. Las mezclas lisas son justo lo que la compresión fuerte aplasta en bloques, y un grano fino da al codificador detalle al que agarrarse. Aun así, prueba tu exportación: una compresión muy fuerte también puede borrar el grano.
En un Mark, el grano es parte de la receta y se renderiza en vivo junto con el color.
A tamaño cuadrado, el Mark se renderiza de nuevo para el formato, así que el grano sigue fino en vez de ampliarse.
Cuánto grano añadir
El error más común es pasarse. El grano fuerte parece una lente sucia o una foto de móvil con poca luz. La cantidad adecuada depende del tamaño de la zona calma, de lo oscuro que sea el degradado y de dónde se vaya a ver. Toma los números de abajo como puntos de partida para una capa de ruido en el modo de fusión Superposición o Luz suave, y luego juzga a ojo a tamaño completo.
| Uso | Opacidad inicial | Tamaño del grano |
|---|---|---|
| Fondos de interfaz, detrás de texto corrido | Alrededor de un 5 a un 10 % | Fino |
| Posts sociales y secciones de portada | Alrededor de un 10 a un 20 % | De fino a medio |
| Carteles, portadas de discos, estilos editoriales atrevidos | Alrededor de un 20 a un 35 % | De medio a grueso |
| Degradados oscuros propensos a las bandas | Lo suficiente para ocultar los pasos, no más | Fino |
Dónde poner el grano
El grano no tiene por qué ser uniforme. Se ve más natural en zonas grandes y calmas de color y en tonos oscuros, donde el grano de película se nota más en la vida real. Mantenlo más suave detrás del texto pequeño, porque el ruido en los bordes de las letras las hace parecer borrosas. Y deja tu logotipo y tu tipografía por encima de la capa de grano, no debajo, para que se mantengan nítidos.
Evita
- Grano tan fuerte que parece suciedad o poca luz
- Grano sobre logotipos y texto pequeño
- Una imagen granulada pequeña ampliada, de modo que el grano se convierte en manchas
- Ruido de colores, moteado como un arcoíris, sobre una paleta calma
Haz
- Un grano que sientes más que ves
- Tipografía y logotipos por encima de la capa de grano
- Grano renderizado o en mosaico al tamaño final
- Ruido monocromo fundido con los colores de debajo
Cómo añadir grano a un degradado en CSS
El método más ligero es un filtro de ruido SVG usado como imagen de fondo. feTurbulence genera ruido aleatorio, feColorMatrix le quita el color para que no salpique, y un modo de fusión lo mezcla con el degradado de debajo. Los valores altos de baseFrequency dan un grano más fino; stitchTiles hace que la tesela se repita sin costuras.
.grainy {
position: relative;
isolation: isolate;
background: linear-gradient(135deg, #1e1b4b 0%, #7c3aed 55%, #f472b6 100%);
}
.grainy::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
mix-blend-mode: overlay;
opacity: 0.18;
}z-index: -1 dentro de un elemento padre aislado mantiene el grano por encima del degradado pero por debajo de cualquier texto.Si prefieres una imagen, una pequeña imagen de ruido en mosaico guardada como PNG funciona igual que el SVG. Mantenla sin pérdidas: las teselas de ruido en JPEG recogen artefactos de compresión. Para más patrones y trucos de textura sin imágenes, mira la textura de ruido en CSS.
Cómo añadir grano en herramientas de diseño
- 1
Construye primero el degradado
Acierta con los colores, las paradas y la composición en una capa limpia. El grano no puede rescatar una mezcla turbia; mira los degradados turbios.
- 2
Añade una capa de ruido aparte
Usa el efecto de ruido de la herramienta o una textura de ruido en su propia capa encima del degradado, para poder ajustarla sin tocar el color.
- 3
Hazlo monocromo
Desatura el ruido para que no añada motas de color y luego pon la capa en Superposición o Luz suave.
- 4
Baja la opacidad hasta que desaparezca y luego sube un poco
La cantidad adecuada suele estar justo por encima del punto en que dejas de notarlo.
- 5
Exporta al tamaño final, sin pérdidas si puedes
Ampliar una imagen granulada agranda el grano hasta convertirlo en manchas. Exporta en PNG al tamaño exacto, o en JPEG de alta calidad para fotos.
El grano en impresión
Un grano pensado para la pantalla de un móvil puede comportarse distinto en papel. A 300 ppp, un ruido muy fino puede desaparecer por completo, y un ruido grueso puede parecer un defecto de impresión. Para carteles y folletos, haz el grano a resolución de impresión y pruébalo en el papel real. Los degradados para impresión cubren el resto del proceso.
El grano es también uno de varios materiales. El papel, el cristal y la seda cambian lo que dice un degradado; la textura en degradados los compara. Cada Mark lleva su propio ajuste de grano junto a sus colores y materiales, así que el equilibrio ya está fijado cuando empiezas a diseñar.
Preguntas frecuentes
¿Qué es un degradado granulado?
Es una mezcla de color con una capa fina de ruido aleatorio encima, de modo que se ve con textura, como película o impresión, en vez de perfectamente lisa.
¿Arregla el grano las bandas de un degradado?
Normalmente sí. El ruido aleatorio rompe los bordes duros entre los tonos limitados que puede mostrar una pantalla, y las rayas dejan de verse.
¿Cómo añado grano a un degradado en CSS?
Superpón una imagen de ruido SVG con feTurbulence sobre el degradado, desatúrala, aplica mix-blend-mode: overlay y usa poca opacidad.
¿Cuánto grano debo añadir?
Menos de lo que crees. Empieza bajo, comprueba al 100 % de zoom en el dispositivo de destino y para justo después de que el grano deje de ser evidente.
¿Por qué mi grano se ve con manchas?
Probablemente la imagen se amplió después de añadir el grano. Añade el grano al tamaño de exportación final, o usa una textura de ruido en mosaico.
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
