# CSS-Rauschtextur: Körnung für Farbverläufe mit SVG [Canonical HTML page](https://gradiently.design/de/guide/css-noise-texture) Eine zarte Rauschebene verbirgt Banding und lässt flache Bildschirmfarbe wie Druck oder Film wirken. Hier der SVG-Filter dahinter, abgestimmt und bereit zum Einfügen. ## The short version - Eine CSS-Rauschtextur entsteht meist mit einem SVG-feTurbulence-Filter, eingebettet als kleines Data-URI-Bild und über einen Farbverlauf gekachelt. - Die baseFrequency von feTurbulence legt die Korngröße fest: Höhere Werte ergeben feineres Korn, niedrigere grobes, wolkiges Rauschen. - Rauschen wirkt am besten, wenn es auf einem Pseudoelement mit einem Mischmodus wie soft-light oder overlay und geringer Deckkraft über den Verlauf gelegt wird. - Körnung verbirgt Banding im Farbverlauf, weil sie die sichtbaren Kanten zwischen benachbarten Tönen in feine, zufällige Abweichungen auflöst. - Ein gekacheltes Rauschbild ist günstig zu rendern, während ein Live-SVG-Filter auf einem großen Element oder seine Animation weit mehr kostet. Eine **CSS-Rauschtextur** ist ein feines, zufälliges Sprenkeln über einer Farbe oder einem Farbverlauf, das ihm Körnung gibt. CSS hat keine Rauschfunktion, die übliche Quelle ist also SVG: Der `feTurbulence`-Filter erzeugt Rauschen, du verpackst ihn in ein winziges SVG, bettest es als Data-URI ein und kachelst es mit geringer Stärke über deinen Verlauf. Das Ergebnis sieht aus wie Filmkorn oder bedrucktes Papier und behebt nebenbei Banding, das sichtbare Stufen, die in großen, glatten Verläufen erscheinen. Warum Körnung Farbe hochwertiger wirken lässt, behandelt [Farbverläufe mit Körnung](https://gradiently.design/de/guide/grainy-gradients). Dieser Leitfaden ist die Umsetzung. ## Der SVG-Rauschfilter ```html ``` Eine 240-Pixel-Kachel mit grauem Rauschen. Speichere sie als noise.svg oder bette sie wie unten gezeigt ein. | Attribut | Wert hier | Was es steuert | | --- | --- | --- | | `type` | `fractalNoise` | Weiches, gleichmäßiges Korn. `turbulence` ergibt streifigeres, gewelltes Rauschen. | | `baseFrequency` | `0.8` | Korngröße. Etwa 0,6 bis 0,9 ist feines Korn; 0,1 bis 0,3 ist wolkig. | | `numOctaves` | `3` | Detailebenen. Über etwa 4 hinaus ist der Unterschied kaum zu sehen. | | `stitchTiles` | `stitch` | Lässt die Ränder der Kachel zusammenpassen, sodass Wiederholungen keine Nähte haben. | | `feColorMatrix` saturate 0 | `0` | Entfernt die zufällige Farbe und lässt graues Korn zurück. | Die Einstellungen, auf die es ankommt. Die [MDN-Referenz zu feTurbulence](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feTurbulence) dokumentiert den Rest. ## Rauschen als Data-URI einbetten Eine separate Datei funktioniert, aber das Einbetten spart eine Anfrage und hält den Effekt an einem Ort. In einer Data-URI müssen Zeichen, die in URLs etwas bedeuten, kodiert werden: `<` wird zu `%3C`, `>` zu `%3E`, `#` zu `%23` und `%` zu `%25`. Nutze innerhalb des SVG einfache Anführungszeichen, damit sie sich nicht mit den doppelten um die URL beißen. ```css :root { --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' 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"); } ``` Dieselbe Kachel als benutzerdefinierte Eigenschaft, die du überall wiederverwenden kannst. Das Vergessen, `#` als `%23` zu kodieren, ist der übliche Grund, warum in Firefox nichts erscheint. ## Rauschen über einen Farbverlauf legen Lege das Rauschen auf ein Pseudoelement über dem Verlauf und steuere es mit zwei Reglern: einem Mischmodus, der bestimmt, wie sich das graue Korn mit der Farbe darunter mischt, und der Deckkraft, die bestimmt, wie stark es ist. `soft-light` hält Farben sauber und ist am sanftesten; `overlay` fügt mehr Kontrast hinzu. `pointer-events: none` verhindert, dass die Ebene Klicks blockiert. ```css .grain { position: relative; isolation: isolate; background: linear-gradient(135deg, #1e1b4b, #7c3aed 55%, #f472b6); } .grain::after { content: ""; position: absolute; inset: 0; z-index: -1; background-image: var(--noise); mix-blend-mode: soft-light; opacity: 0.45; pointer-events: none; } ``` Körnung zwischen Verlauf und Inhalt: Der Text in `.grain` bleibt scharf. - Abendviolett: Körnung mildert Übergang: `linear-gradient(135deg, #1e1b4b, #7c3aed 55%, #f472b6)` - Schieferglühen: Körnung stoppt Banding: `radial-gradient(ellipse at 30% 20%, #334155, #0f172a 70%)` - Pfirsichmorgen: Körnung wirkt wie Papier: `linear-gradient(180deg, #fef3c7, #fdba74 60%, #fb7185)` Drei Farbverläufe, die von Körnung am meisten profitieren. Dunkle, kontrastarme Übergänge wie der mittlere sind dort, wo Banding zuerst auffällt. Bevorzugst du ein einzelnes Element ohne Pseudoelement, liste das Rauschen zuerst in `background-image` auf und setze `background-blend-mode: soft-light, normal`. Du verlierst den separaten Deckkraft-Regler, also backe die Stärke stattdessen ins SVG ein, etwa mit `opacity='0.5'` am `rect`. ## Wie viel Körnung genug ist 1. **Beginne zart** Starte mit `opacity: 0.3` und `soft-light`. Auf Armlänge solltest du es kaum bemerken. 2. **Prüfe den dunkelsten Bereich** Banding lebt in dunklen, langsamen Übergängen. Erhöhe die Deckkraft, bis sich die Stufen dort auflösen, und hör dann auf. 3. **Passe das Korn an die Größe an** Bildschirmfüllende Heros vertragen etwas gröberes Korn, etwa 0,6. Karten und Buttons wollen feines Korn, etwa 0,9. 4. **Prüfe auf einem Handy und einem großen Monitor** Körnung, die auf einem Bildschirm stimmt, kann auf einem anderen wie Staub wirken. Ziele auf Textur, die du spürst statt siehst. 5. **Prüfe den Text darüber** Körnung darf die Lesbarkeit nicht mindern. Sitzt kleiner Text auf der Textur, senke die Stärke oder halte den Text auf einer ruhigeren Fläche. ### Zu viel - Körnung, die man quer durch den Raum sieht - Farben werden grau und schmutzig - Grobes, wolkiges Rauschen auf kleinen Komponenten - Textkanten wirken unscharf vor dem Sprenkeln ### Etwa richtig - Körnung, die man nur aus der Nähe bemerkt - Farben bleiben mit soft-light sauber - Feines Korn, passend zur Größe des Elements - Banding weg, Text scharf ## Performance von CSS-Rauschen Eine gekachelte Data-URI ist günstig: Der Browser rendert die kleine Kachel einmal und wiederholt sie, und eine statische Ebene wird einmal gezeichnet. Die teure Variante ist, den Filter live mit `filter: url(#noise)` auf ein großes Element anzuwenden, was den Filter über jeden Pixel laufen lässt, wann immer die Fläche neu zeichnet. Animierst du Körnung für einen flackernden Filmlook, verschiebe die gekachelte Ebene mit `transform` in ein paar ruckartigen Schritten, statt Rauschen neu zu erzeugen, und schalte es für [reduzierte Bewegung](https://gradiently.design/de/guide/reduced-motion) ab. ```css .grain { overflow: hidden; } .grain::after { inset: -50%; animation: flicker 0.6s steps(3) infinite; } @keyframes flicker { 0% { transform: translate(0, 0); } 33% { transform: translate(-3%, 2%); } 66% { transform: translate(2%, -3%); } } @media (prefers-reduced-motion: reduce) { .grain::after { animation: none; } } ``` Animierte Körnung durch Bewegen einer übergroßen Kachel. Der negative Inset hält die Ränder bedeckt, während sie sich verschiebt. Eine vorgerenderte PNG- oder WebP-Rauschkachel mit etwa 128 bis 256 Pixeln ist eine ebenso gute Quelle, wenn du schon eine hast. Körnung ist auch eine Zutat einer breiteren Familie von Oberflächen, von Papier bis Glas, die [Hintergrundtextur](https://gradiently.design/de/guide/background-texture) behandelt. Sie ist außerdem die Schlussebene eines [CSS-Mesh-Verlaufs](https://gradiently.design/de/guide/css-mesh-gradient). Körnung steckt in jedem Mark von Gradiently als Materialeinstellung, neben Licht und Bewegung, sodass damit gemachte Designs Textur ganz ohne Code tragen. Ein Mark mit Körnung als Teil seines Materials, live gerendert statt nachträglich darübergelegt. ## FAQ ### Wie füge ich in CSS eine Rauschtextur hinzu? Bette ein SVG mit einem `feTurbulence`-Filter als Data-URI ein, kachele es auf einem Pseudoelement über deinem Farbverlauf und setze einen Mischmodus wie `soft-light` mit geringer Deckkraft. ### Warum erscheint meine SVG-Rausch-Data-URI nicht? Meist wegen eines nicht kodierten Zeichens. Kodiere in der Data-URI `#` als `%23`, `%` als `%25` und die spitzen Klammern als `%3C` und `%3E` und nutze im SVG einfache Anführungszeichen. ### Behebt Körnung Banding im Farbverlauf? Ja, in den meisten Fällen. Zufällige feine Abweichungen brechen die harten Kanten zwischen benachbarten Tönen auf, sodass das Auge keine Stufen mehr sieht. ### Welche baseFrequency sollte ich für Körnung nutzen? Etwa 0,6 bis 0,9 ergibt feines, filmartiges Korn. Niedrigere Werte wie 0,2 ergeben großes, wolkiges Rauschen. ### Ist CSS-Rauschen schlecht für die Performance? Ein kleines gekacheltes Rauschbild ist günstig. Live-SVG-Filter auf großen Elementen und ständig neu erzeugtes Rauschen kosten am meisten.