# Noise Verläufe: weiche Farbe mit körnigem Finish

[Canonical HTML page](https://gradiently.design/de/guide/noise-background)

Noise Verläufe sind leicht beschrieben und kniffelig umzusetzen. Hier sind fünf erprobte Rezepte, jeweils mit Farben, Rauscheinstellungen und dem Grund, warum sie funktionieren, plus was jeder Regler eines Generators wirklich tut.

## The short version

- Ein Noise Verlauf ist eine weiche Farbmischung mit einer feinen Schicht zufälligen Rauschens darüber, die ihm ein gedrucktes, haptisches Finish gibt und Banding versteckt.
- Die beiden wichtigsten Einstellungen sind die Frequenz des Rauschens, die die Korngröße steuert, und die Deckkraft, die bestimmt, wie stark es wirkt.
- Fraktales Rauschen mit einer Frequenz zwischen 0,6 und 0,9, im Modus Ineinanderkopieren oder Weiches Licht mit 8 bis 20 Prozent Deckkraft, passt zu den meisten Bildschirmhintergründen.
- Dunkle Noise Verläufe brauchen weniger Rauschen als helle, weil Körnung in Schatten und Mitteltönen am stärksten sichtbar ist.
- In CSS lässt sich Rauschen mit einem SVG Filter `feTurbulence` inline zeichnen, sodass es in jeder Größe scharf bleibt und keine Bilddatei braucht.

Ein **Noise Verlauf** ist eine weiche Farbmischung mit einer feinen Schicht zufälligen Rauschens darüber, sodass die Farbe gedruckt statt gerendert wirkt. Die Mischung liefert Farbe und Lichtrichtung, das Rauschen liefert eine Oberfläche und verhindert, dass die Mischung in Streifen zerfällt. Unten findest du fünf Rezepte zum Kopieren und dann eine verständliche Erklärung jeder Generatoreinstellung, damit du eigene bauen kannst.

## Fünf Rezepte für Noise Verläufe

Jedes Rezept besteht aus einem Grundverlauf und einer Rauscheinstellung. Die Verläufe siehst du hier ohne Rauschen, damit die Farbe erkennbar ist; die Tabelle darunter nennt das Rauschen, das obendrauf kommt. Sie unterscheiden sich bewusst: einer dunkel, einer hell, einer warm, einer kühl, einer kräftig.

- 1. Nachtviolett: `radial-gradient(circle at 70% 25%, #8b5cf6 0%, #3b1a78 40%, #0e0820 80%)`
- 2. Pfirsichpapier: `radial-gradient(circle at 25% 20%, #ffd9b8 0%, #f6c6c0 40%, #f3ece6 85%)`
- 3. Sonnenuntergangsplakat: `linear-gradient(160deg, #ff7a3d 0%, #e5486f 50%, #5b2a86 100%)`
- 4. Tiefe Lagune: `radial-gradient(ellipse at 30% 90%, #34d399 0%, #0f766e 40%, #06232a 85%)`
- 5. Klares Blau: `linear-gradient(135deg, #1e3a8a 0%, #2563eb 45%, #93c5fd 100%)`

Die fünf Grundmischungen vor dem Rauschen. Klick auf eine, um ihr CSS zu kopieren.

| Rezept | Frequenz | Modus | Deckkraft | Warum |
| --- | --- | --- | --- | --- |
| 1. Nachtviolett | 0,85, 3 Oktaven | Ineinanderkopieren | 8% | Dunkle Töne zeigen Körnung leicht, also sparsam bleiben |
| 2. Pfirsichpapier | 0,65, 4 Oktaven | Multiplizieren | 10% | Multiplizieren dunkelt nur ab, so bleibt der helle Grund weich |
| 3. Sonnenuntergangsplakat | 0,6, 3 Oktaven | Ineinanderkopieren | 20% | Kräftige Farbe trägt schwerere, gröbere Körnung wie ein Siebdruck |
| 4. Tiefe Lagune | 0,9, 2 Oktaven | Weiches Licht | 12% | Feine Körnung hält eine kühle Mischung sauber |
| 5. Klares Blau | 0,75, 3 Oktaven | Weiches Licht | 14% | Blau zu Hellblau bekommt starkes Banding; Rauschen glättet es |

Rauscheinstellungen für jedes Rezept, mit fraktalem Rauschen in Graustufen. Frequenz und Oktaven entsprechen direkt dem SVG Filter im Code unten.

## Die Einstellungen eines Noise Generators erklärt

Jeder [Verlaufsgenerator](https://gradiently.design/de/guide/gradient-generator) mit Rauschoption und jeder SVG Rauschfilter nutzt eine Version derselben Regler. Sobald du weißt, was jeder tut, kannst du jedes Rezept lesen und jedes Ergebnis korrigieren.

| Einstellung | Was sie ändert | Guter Ausgangspunkt |
| --- | --- | --- |
| **Frequenz** (Skalierung, Größe) | Korngröße. Höher ist feiner, niedriger gröber. | 0,6 bis 0,9 für Bildschirme |
| **Oktaven** (Detail) | Detailschichten im Rauschen. Mehr wirkt reicher und kostet mehr Rechenaufwand. | 2 bis 4 |
| **Typ** | Fraktales Rauschen ist weich und wolkig, Turbulenz schärfer und streifiger. | Fraktales Rauschen |
| **Farbe** | Graustufen halten deine Palette exakt, farbiges Rauschen fügt filmähnliche Sprenkel hinzu. | Graustufen |
| **Mischmodus** | Wie sich Rauschen mit Farbe mischt. Ineinanderkopieren erhöht den Kontrast, Weiches Licht ist sanfter, Multiplizieren dunkelt nur ab. | Ineinanderkopieren oder Weiches Licht |
| **Deckkraft** (Menge) | Gesamtstärke. | 8 bis 20% |
| **Seed** | Welches Zufallsmuster du bekommst. Ändere ihn, wenn dir eine Verklumpung missfällt. | Beliebig |

Die Regler hinter jedem Noise Generator, in einfachen Worten.

> **Beurteile Rauschen in der Endgröße** Rauschen, das am Laptop vergrößert richtig aussieht, verschwindet auf dem Handy oft oder wird nach einem Upload zu Brei. Prüf den Export in der Größe, in der Menschen ihn sehen, auf dem Bildschirm, den sie nutzen.

## So machst du einen Noise Verlauf in CSS

Die sauberste Methode legt ein SVG Rauschbild in einer einzigen `background` Deklaration über deinen Verlauf und mischt beide. Tausch den Verlauf gegen ein beliebiges Rezept von oben und stell Frequenz und Deckkraft nach der Tabelle ein.

```css
.noise-gradient {
  position: relative;
  isolation: isolate;
  background: radial-gradient(circle at 70% 25%, #8b5cf6 0%, #3b1a78 40%, #0e0820 80%);
}

.noise-gradient::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  /* Recipe 1: frequency 0.85, 3 octaves */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' 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");
  mix-blend-mode: overlay;
  opacity: 0.08;
}
```

Rezept 1 in CSS. Das Rauschen liegt auf einem Pseudoelement unter dem Inhalt, sodass Text scharf bleibt. `stitchTiles` lässt die Kachel ohne Nähte wiederholen.

### Die Sprenkelmethode mit hohem Kontrast

Für einen kräftigeren Look, fast wie Risografie, leg Rauschen und Verlauf in dieselbe Ebene und schick beide durch einen Kontrastfilter. Das Rauschen wird zu harten Sprenkeln zerdrückt, die dem Licht des Verlaufs folgen. Es ist lauter als Rezept 3, also nutze es für Plakate und Hero Banner, nicht hinter Fließtext.

```css
.speckle {
  background:
    linear-gradient(160deg, #ff7a3d 0%, transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)'/%3E%3C/svg%3E");
  filter: contrast(170%) brightness(1000%);
  mix-blend-mode: multiply; /* over a coloured parent, e.g. #5b2a86 */
}
```

Kontrast zerdrückt weiches Rauschen zu Sprenkeln, und die starke Helligkeit schiebt den Rest Richtung Weiß. Multiplizieren legt das Ergebnis dann über ein farbiges Elternelement, etwa #5b2a86. Stimm die beiden Filterwerte gemeinsam ab und halte Text in einer eigenen Ebene darüber.

## Das richtige Rauschen für das Format

Rauschen ist relativ zur Fläche. Derselbe Filter wirkt auf einer Story am Handy fein und auf einem kleinen Banner grob, also passe die Frequenz an das Format an, statt überall dieselbe Datei zu nutzen.

Eine Countdown Story im Hochformat auf einem körnigen violetten Verlaufshintergrund

Eine Story in 1080×1920 sieht man aus der Nähe am Handy: Halte das Rauschen fein und eher leicht.

Ein breiter Website Hero mit Headline über einem weich gekörnten warmen Verlauf

Ein Website Hero in 1920×1080 füllt einen großen Bildschirm: Senk die Deckkraft, denn große Flächen machen Rauschen offensichtlich.

- **Stories und Posts:** Frequenz um 0,8, Deckkraft 8 bis 14 Prozent. Etwas mehr, als du denkst, weil Uploads es weicher machen.
- **Website Heroes:** Frequenz 0,7 bis 0,9, Deckkraft 4 bis 10 Prozent. Siehe [Hintergründe für Website Heroes](https://gradiently.design/de/guide/website-hero-background).
- **Plakate für den Druck:** gröbere Körnung, Frequenz 0,5 bis 0,7 in der finalen Pixelgröße, damit sie den Druck übersteht.
- **Dunkle Hintergründe:** halbiere deine übliche Menge. [Dunkle Verlaufshintergründe](https://gradiently.design/de/guide/dark-gradient-backgrounds) erklärt, warum Schatten Körnung zuerst zeigen.

## Noise Verlauf oder Verlauf mit Körnung

Es ist dieselbe Idee mit anderer Betonung. Von Körnung spricht man, wenn man den Look meint, von Noise, wenn man meint, wie er entsteht. [Verläufe mit Körnung](https://gradiently.design/de/guide/grainy-gradients) erklärt, warum Körnung funktioniert und wo sie hingehört; diese Seite ist das Rezeptbuch. Willst du Textur ohne Farbmischung, fang stattdessen mit [Körnungstextur](https://gradiently.design/de/guide/textured-background) an.

Wenn du überhaupt keine Regler abstimmen willst: Jeder Mark von Gradiently trägt seine eigene Einstellung für Körnung neben Farben, Licht und Bewegung und wird in jeder Größe frisch gerendert, sodass das Rauschen nie gestreckt oder unscharf wird. Gestalte kostenlos mit jedem nicht gesicherten Mark.

## FAQ

### Was ist ein Noise Verlauf?

Eine weiche Farbmischung mit einer feinen Schicht zufälligen Rauschens darüber. Das Rauschen gibt ihr ein gedrucktes Finish und versteckt Banding.

### Welche Rauscheinstellungen sollte ich für einen Verlauf nutzen?

Fraktales Rauschen in Graustufen, eine Frequenz von 0,6 bis 0,9 und 2 bis 4 Oktaven, gemischt im Modus Ineinanderkopieren oder Weiches Licht mit etwa 8 bis 20 Prozent Deckkraft.

### Wie füge ich einem Verlauf in CSS Rauschen hinzu?

Leg ein Inline SVG mit einem Filter `feTurbulence` auf einem Pseudoelement über den Verlauf und setz `mix-blend-mode: overlay` mit geringer Deckkraft.

### Warum sieht mein Noise Verlauf nach dem Hochladen unscharf aus?

Plattformen komprimieren Bilder neu und glätten feine Details. Exportiere in genau der Plattformgröße als PNG oder JPEG in hoher Qualität und nutze für Social Posts etwas mehr Rauschen.

### Ist ein Noise Verlauf dasselbe wie ein Verlauf mit Körnung?

In der Praxis ja. Körnung beschreibt den Look, Noise die Methode, mit der er entsteht.