Noise Texture Generator
Genera texturas de ruido y grano SVG como patrones de fondo CSS. Repetibles, CSS puro, sin imágenes.
① Elige tipo de textura y frecuencia ② Ajusta octavas y opacidad ③ Copia el CSS
#1A1714
.noise-bg {
background-color: #1a1714;
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'200'%20height%3D'200'%3E%3Cfilter%20id%3D'noise'%3E%3CfeTurbulence%20type%3D'turbulence'%20baseFrequency%3D'0.65'%20numOctaves%3D'4'%20stitchTiles%3D'stitch'%2F%3E%3CfeColorMatrix%20type%3D'saturate'%20values%3D'0'%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D'200'%20height%3D'200'%20filter%3D'url(%23noise)'%20opacity%3D'0.30'%2F%3E%3C%2Fsvg%3E");
background-repeat: repeat;
background-size: 200px 200px;
}¿Qué son las texturas de ruido SVG y cómo usarlas en CSS?
Las texturas de ruido SVG son patrones generados proceduralmente usando el filtro SVG feTurbulence. Se pueden incrustar como URI data: directamente en CSS. baseFrequency controla la granularidad. El tipo turbulence crea ruido similar a nubes, mientras que fractalNoise genera patrones de grano más suaves y orgánicos.
Preguntas frecuentes
feTurbulence es una primitiva de filtro SVG que genera ruido procedimental usando el algoritmo de Perlin. Dos tipos: turbulence (nuboso) y fractalNoise (más suave, orgánico).
baseFrequency controla la escala del patrón de ruido. Valores bajos (0.50–0.65) = ruido grueso y suave. Valores altos (0.80–0.90) = grano fino, similar al grano fotográfico.
Ruido: turbulence con frecuencia estándar. Grano: fractalNoise — más suave, orgánico. Grava: turbulence a mayor frecuencia (1.5x) — textura más gruesa.
Cada octava añade una capa de detalle a mayor frecuencia. 1 octava = ruido simple. 3–4 octavas = textura natural. 5 octavas = grano muy detallado.
Sí. El atributo stitchTiles='stitch' en el filtro SVG hace que el patrón se repita sin costuras visibles.
Los data URI SVG son procesados por la GPU, por lo general son ligeros. Para mejor rendimiento, úsalos como background-image estático.
Aplica el ruido como segunda capa background-image: background-image: url('data:...'), linear-gradient(...).