Noise Texture Generator
Genera texture di rumore e grana SVG come pattern di sfondo CSS. Ripetibili, solo CSS, nessuna immagine necessaria.
① Scegli il tipo di texture e la frequenza ② Regola ottave e opacità ③ Copia il 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;
}Cosa sono le texture di rumore SVG e come usarle in CSS?
Le texture di rumore SVG sono pattern generati proceduralmente usando il filtro SVG feTurbulence. Possono essere incorporate come URI data: direttamente in CSS senza file immagine. baseFrequency controlla la granularità: valori bassi producono rumore liscio, valori alti creano grana fine. numOctaves aggiunge livelli di dettaglio. Il tipo turbulence crea rumore simile a nuvole, mentre fractalNoise genera pattern di grana più lisci e organici.
Domande frequenti
feTurbulence è una primitiva filtro SVG che genera rumore procedurale usando l'algoritmo di Perlin. Produce pattern pseudo-casuali con due tipi: turbulence (simile a nuvole) e fractalNoise (più liscio e organico).
baseFrequency controlla la scala del pattern di rumore. Valori bassi (0.50–0.65) producono rumore grezzo e liscio. Valori alti (0.80–0.90) creano grana fine, simile alla grana fotografica.
Rumore usa il tipo turbulence con frequenza standard. Grana usa fractalNoise — più liscia e organica. Ghiaia usa turbulence a frequenza più alta (1.5x) — texture più grezza e granulosa.
Ogni ottava aggiunge un livello di dettaglio a frequenza più alta. 1 ottava = rumore semplice. 3–4 ottave = texture naturale e complessa. 5 ottave = grana molto dettagliata.
Sì. L'attributo stitchTiles='stitch' nel filtro SVG fa sì che il browser ripeta il pattern di rumore senza cuciture visibili.
I data URI SVG sono elaborati dalla GPU come operazioni di filtro, quindi sono generalmente leggeri. Per le migliori prestazioni, usa il rumore come background-image statico.
Applica il rumore come secondo livello background-image sopra un gradiente: background-image: url('data:...'), linear-gradient(...). I livelli CSS si sovrappongono, con il primo elemento in alto.