Noise Texture Generator
Erzeuge SVG-basierte Rausch- und Körnung-Texturen als CSS-Hintergrundmuster. Kachelbar, reines CSS, keine Bilder erforderlich.
① Texturtyp und Frequenz wählen ② Oktaven und Opazität anpassen ③ CSS kopieren
#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;
}Was sind SVG-Rauschtexturen und wie verwendet man sie in CSS?
SVG-Rauschtexturen sind prozedural generierte Muster, die mit dem SVG-Filter feTurbulence erzeugt werden. Sie können als data:-URI direkt in CSS eingebettet werden. baseFrequency steuert die Granularität. Der Typ turbulence erzeugt wolkenähnliches Rauschen, fractalNoise weichere, organischere Körnung.
Häufig gestellte Fragen
feTurbulence ist eine SVG-Filterprimitive, die mit dem Perlin-Noise-Algorithmus prozedurales Rauschen erzeugt. Zwei Typen: turbulence (wolkenartig) und fractalNoise (weicher, organischer).
baseFrequency steuert die Skalierung des Rauschmusters. Niedrige Werte (0.50–0.65) = grobes, weiches Rauschen. Hohe Werte (0.80–0.90) = feines Korn, ähnlich Filmkorn.
Rauschen: turbulence mit Standardfrequenz. Körnung: fractalNoise — weicher, organischer. Kies: turbulence bei höherer Frequenz (1.5x) — gröbere, körnige Textur.
Jede Oktave fügt eine Detailschicht bei höherer Frequenz hinzu. 1 Oktave = einfaches Rauschen. 3–4 Oktaven = natürliche, komplexe Textur. 5 Oktaven = sehr detailliertes Korn.
Ja. Das Attribut stitchTiles='stitch' im SVG-Filter sorgt dafür, dass das Rauschen nahtlos kachelt.
SVG-data-URIs werden von der GPU als Filteroperationen verarbeitet, daher generell leichtgewichtig. Für beste Leistung als statisches background-image verwenden.
Wende das Rauschen als zweite background-image-Ebene über einem Verlauf an: background-image: url('data:...'), linear-gradient(...).