La versión corta
- Un degradado con ruido es una mezcla de color suave con una capa de ruido aleatorio fino encima, lo que le da un acabado impreso y táctil y oculta las bandas.
- Los dos ajustes que más importan son la frecuencia del ruido, que controla el tamaño del grano, y la opacidad, que controla su intensidad.
- Un ruido fractal con una frecuencia entre 0,6 y 0,9, fusionado en Superponer o Luz suave al 8 a 20 por ciento de opacidad, sirve para la mayoría de los fondos de pantalla.
- Los degradados oscuros con ruido necesitan menos ruido que los claros, porque el grano se ve más en las sombras y los tonos medios.
- En CSS, el ruido se puede dibujar con un filtro SVG
feTurbulenceen línea, así que se mantiene nítido a cualquier tamaño y no necesita ningún archivo de imagen.
En esta página
Un degradado con ruido es una mezcla de color suave con una capa fina de ruido aleatorio encima, de modo que el color parece impreso en lugar de renderizado. La mezcla te da el color y la dirección de la luz; el ruido te da una superficie e impide que la mezcla se rompa en bandas. Abajo tienes cinco recetas para copiar y luego una explicación sencilla de cada ajuste de un generador para que puedas hacer las tuyas.
Cinco recetas de degradado con ruido
Cada receta es un degradado base y un ajuste de ruido. Los degradados se muestran aquí sin ruido para que veas el color; la tabla de abajo indica el ruido que hay que añadir encima. Son a propósito distintos entre sí: uno oscuro, uno claro, uno cálido, uno frío y uno atrevido.
Frecuencia
Fusión
Opacidad
Por qué
Frecuencia
Fusión
Opacidad
Por qué
Frecuencia
Fusión
Opacidad
Por qué
Frecuencia
Fusión
Opacidad
Por qué
Frecuencia
Fusión
Opacidad
Por qué
Los ajustes de un generador de degradados con ruido, explicados
Todo generador de degradados con opción de ruido, y todo filtro de ruido SVG, usa alguna versión de los mismos controles. En cuanto sabes qué hace cada uno, puedes leer cualquier receta y arreglar cualquier resultado.
Qué cambia
Buen punto de partida
Qué cambia
Buen punto de partida
Buen punto de partida
Qué cambia
Buen punto de partida
Qué cambia
Buen punto de partida
Qué cambia
Buen punto de partida
Qué cambia
Buen punto de partida
Cómo hacer un degradado con ruido en CSS
El método más limpio superpone una imagen de ruido SVG a tu degradado y luego los fusiona. Cambia el degradado por cualquiera de las recetas de arriba y ajusta la frecuencia y la opacidad según la tabla.
.noise-gradient {
position: relative;
isolation: isolate;
background: radial-gradient(circle at 70% 25%, #8b5cf6 0%, #3b1a78 40%, #0e0820 80%);
}
.noise-gradient::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
/* Recipe 1: frequency 0.85, 3 octaves */
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%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.08;
}stitchTiles hace que el mosaico se repita sin costuras.El método de motas de alto contraste
Para un aspecto más atrevido, casi de risografía, pon el ruido y el degradado en la misma capa y pásalos por un filtro de contraste. El ruido se aplasta en motas duras que siguen la luz del degradado. Es más llamativo que la receta 3, así que úsalo para pósteres y banners principales, no detrás del texto de cuerpo.
.speckle {
background:
linear-gradient(160deg, #ff7a3d 0%, transparent 70%),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)'/%3E%3C/svg%3E");
filter: contrast(170%) brightness(1000%);
mix-blend-mode: multiply; /* over a coloured parent, e.g. #5b2a86 */
}Elegir el ruido adecuado para cada formato
El ruido es relativo al lienzo. El mismo filtro se ve fino en una historia en el móvil y grueso en un banner pequeño, así que adapta la frecuencia al formato en lugar de reutilizar un mismo archivo en todas partes.
Una historia de 1080×1920 se ve de cerca en el móvil: mantén el ruido fino y bastante ligero.
Un hero web de 1920×1080 llena una pantalla grande: baja la opacidad, porque las superficies grandes delatan el ruido.
- Historias y publicaciones: frecuencia alrededor de 0,8, opacidad del 8 al 14 por ciento. Algo más de lo que crees, porque la subida lo suaviza.
- Heros web: frecuencia de 0,7 a 0,9, opacidad del 4 al 10 por ciento. Mira fondos para el hero de una web.
- Pósteres para imprimir: grano más grueso, frecuencia de 0,5 a 0,7 al tamaño final en píxeles, para que sobreviva a la imprenta.
- Fondos oscuros: reduce a la mitad tu cantidad habitual. Fondos degradados oscuros explica por qué las sombras muestran el grano primero.
Degradado con ruido o degradado con grano
Son la misma idea con distinto énfasis. Se dice degradado con grano cuando se habla del aspecto, y degradado con ruido cuando se habla de cómo se hace. Degradados con grano explica por qué funciona el grano y dónde ponerlo; esta página es el recetario. Si quieres textura sin una mezcla de color, empieza mejor por textura de grano.
Si prefieres no tocar controles en absoluto, cada Mark de Gradiently lleva su propio ajuste de grano junto a sus colores, su luz y su movimiento, renderizado de nuevo a cada tamaño para que el ruido nunca se estire ni se emborrone. Diseña gratis con cualquier Mark sin reservar.
Preguntas frecuentes
¿Qué es un degradado con ruido?
Una mezcla de color suave con una capa fina de ruido aleatorio encima. El ruido le da un acabado impreso y oculta las bandas.
¿Qué ajustes de ruido debo usar en un degradado?
Ruido fractal, monocromo, una frecuencia de 0,6 a 0,9 y de 2 a 4 octavas, fusionado en Superponer o Luz suave con una opacidad de entre el 8 y el 20 por ciento aproximadamente.
¿Cómo añado ruido a un degradado en CSS?
Superpón al degradado un SVG en línea con un filtro feTurbulence, en un pseudoelemento, y pon mix-blend-mode: overlay con una opacidad baja.
¿Por qué mi degradado con ruido se ve borroso tras subirlo?
Las plataformas recomprimen las imágenes y suavizan el detalle fino. Exporta al tamaño exacto de la plataforma en PNG o JPEG de alta calidad, y usa algo más de ruido en las publicaciones para redes.
¿Un degradado con ruido es lo mismo que un degradado con grano?
Sí, en la práctica. Con grano describe el aspecto y con ruido describe el método para conseguirlo.
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