Noise Texture Generator
Gere texturas de ruído e grão SVG como padrões de fundo CSS. Repetíveis, CSS puro, sem imagens.
① Escolha o tipo de textura e a frequência ② Ajuste oitavas e opacidade ③ Copie o 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;
}O que são texturas de ruído SVG e como usá-las em CSS?
As texturas de ruído SVG são padrões gerados proceduralmente usando o filtro SVG feTurbulence. Podem ser incorporadas como URI data: diretamente em CSS. baseFrequency controla a granularidade. O tipo turbulence cria ruído semelhante a nuvens, enquanto fractalNoise gera padrões de grão mais suaves e orgânicos.
Perguntas frequentes
feTurbulence é uma primitiva de filtro SVG que gera ruído procedimental usando o algoritmo de Perlin. Dois tipos: turbulence (nublado) e fractalNoise (mais suave, orgânico).
baseFrequency controla a escala do padrão de ruído. Valores baixos (0.50–0.65) = ruído grosseiro e suave. Valores altos (0.80–0.90) = grão fino, semelhante ao grão fotográfico.
Ruído: turbulence com frequência padrão. Grão: fractalNoise — mais suave, orgânico. Cascalho: turbulence a maior frequência (1.5x) — textura mais grossa.
Cada oitava adiciona uma camada de detalhes a maior frequência. 1 oitava = ruído simples. 3–4 oitavas = textura natural. 5 oitavas = grão muito detalhado.
Sim. O atributo stitchTiles='stitch' no filtro SVG faz o padrão repetir sem costuras visíveis.
Os data URI SVG são processados pela GPU, geralmente leves. Para melhor desempenho, use como background-image estático.
Aplique o ruído como segunda camada background-image: background-image: url('data:...'), linear-gradient(...).