# Farbverlauf mit Körnung: warum etwas Rauschen Farbe edel wirken lässt

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

Ein glatter Farbverlauf sieht aus wie eine Bildschirmvorgabe. Derselbe Verlauf mit einer feinen Schicht Körnung sieht aus wie ein Druck, ein Filmstill oder eine gestrichene Wand. Hier steht, warum, wie viel und wie.

## The short version

- Ein Farbverlauf mit Körnung ist ein Farbübergang mit einer feinen Schicht zufälligen Rauschens darüber, sodass die Oberfläche texturiert statt perfekt glatt wirkt.
- Körnung verbirgt Banding, weil zufällige Abweichungen die sichtbaren Stufen zwischen den begrenzten Farbtönen eines Bildschirms aufbrechen.
- Körnung lässt digitale Farbe körperlich wirken und erinnert an Film, Risografie und mattes Papier.
- Körnung sollte man eher spüren als sehen: dezent anfangen, in voller Größe prüfen und nur dort mehr hinzufügen, wo die Fläche groß und ruhig ist.
- In CSS ist die übliche Methode eine SVG-Rauschebene mit feTurbulence, die mit einem Mischmodus und geringer Deckkraft über den Verlauf gelegt wird.

Ein **Farbverlauf mit Körnung**, oft Grainy Gradient genannt, ist ein Farbverlauf mit einer feinen Schicht zufälligen Rauschens darüber, sodass die Farbe eine sichtbare Textur hat statt einer perfekt glatten, digitalen Oberfläche. Beliebt wurde er aus einem praktischen und einem visuellen Grund: Körnung verbirgt die Streifen, die glatte Übergänge oft zeigen, und sie lässt Farbe auf einem Bildschirm wie etwas Gedrucktes, Gefilmtes oder Gemaltes aussehen. Gut gemacht bemerken die meisten Menschen die Körnung gar nicht. Sie finden nur, dass die Farbe besser aussieht.

## Warum Körnung einen Farbverlauf besser aussehen lässt

Es gibt drei Gründe, und sie verstärken sich gegenseitig.

- **Sie verbirgt Banding.** Die meisten Bilder haben 256 Abstufungen pro Farbkanal. Ein sanfter Übergang über eine große Fläche muss zwischen ihnen springen, und dein Auge erkennt die Stufen als Streifen. Zufälliges Rauschen verteilt Pixel auf benachbarte Abstufungen, sodass die Kanten zwischen den Stufen verschwinden. Das ist dieselbe Idee wie Dithering. Siehe [Banding bei Farbverläufen](https://gradiently.design/de/guide/gradient-banding).
- **Sie bringt Haptik.** Physische Dinge sind nie perfekt glatt. Film hat Korn, Papier hat Struktur, und gedruckte Farbe liegt ungleichmäßig. Ein wenig Rauschen leiht sich diese Assoziationen, sodass ein flacher digitaler Übergang sich wie ein Material anfühlt.
- **Sie übersteht Kompression besser.** Social-Plattformen und Messenger komprimieren Bilder neu. Glatte Übergänge sind genau das, was starke Kompression zu Blöcken plattdrückt, und feine Körnung gibt dem Encoder Details, an denen er sich festhalten kann. Teste aber deinen Export: Sehr starke Kompression kann auch Körnung verschmieren.

Ein Hochformat-Post mit dem Titel Weiches Licht auf einem Farbverlauf mit feiner sichtbarer Körnung

Bei einem Mark ist Körnung Teil des Rezepts und wird live zusammen mit der Farbe gerendert.

Eine quadratische Version desselben Posts mit körnigem Farbverlauf

Im quadratischen Format wird der Mark für das Format neu gerendert, die Körnung bleibt also fein, statt hochskaliert zu werden.

## Wie viel Körnung du hinzufügen solltest

Der häufigste Fehler ist zu viel. Starke Körnung sieht aus wie eine schmutzige Linse oder ein Handyfoto bei wenig Licht. Die richtige Menge hängt von der Größe der ruhigen Fläche ab, davon, wie dunkel der Verlauf ist, und davon, wo er gesehen wird. Betrachte die Zahlen unten als Startwerte für eine Rauschebene im Mischmodus Ineinanderkopieren oder Weiches Licht und urteile dann mit dem Auge in voller Größe.

| Einsatz | Start-Deckkraft | Korngröße |
| --- | --- | --- |
| Interface-Hintergründe, hinter Fließtext | Etwa 5 bis 10 % | Fein |
| Social-Posts und Hero-Bereiche | Etwa 10 bis 20 % | Fein bis mittel |
| Poster, Albumcover, kräftige Editorial-Looks | Etwa 20 bis 35 % | Mittel bis grob |
| Dunkle Verläufe, die zu Banding neigen | Genug, um die Stufen zu verbergen, nicht mehr | Fein |

Startwerte, keine Regeln. Prüf die Körnung immer bei 100 % Zoom auf dem Gerät, auf dem sie gesehen wird.

> **Der Blinzeltest** Zoom auf 100 %, sieh dir das Design an und tritt dann einen Schritt zurück. Siehst du die Körnung bei einem textlastigen Design aus normalem Abstand, halbiere sie.

## Wohin die Körnung gehört

Körnung muss nicht gleichmäßig sein. Am natürlichsten wirkt sie auf großen, ruhigen Farbflächen und auf dunklen Tönen, wo Filmkorn auch im echten Leben am sichtbarsten ist. Halte sie hinter kleinem Text leichter, denn Rauschen an den Buchstabenkanten lässt sie weich wirken. Und halte Logo und Schrift über der Körnungsebene, nicht darunter, damit sie scharf bleiben.

### Vermeiden

- Körnung so stark, dass sie wie Schmutz oder schwaches Licht wirkt
- Körnung über Logos und kleinem Text
- Ein kleines körniges Bild hochskaliert, sodass die Körnung zu Flecken wird
- Farbiges, regenbogengesprenkeltes Rauschen auf einer ruhigen Palette

### Machen

- Körnung, die man eher spürt als sieht
- Schrift und Logos über der Körnungsebene
- Körnung in der Endgröße gerendert oder gekachelt
- Einfarbiges Rauschen, in die Farben darunter gemischt

## So fügst du einem Farbverlauf in CSS Körnung hinzu

Die leichteste Methode ist ein SVG-Rauschfilter als Hintergrundbild. `feTurbulence` erzeugt zufälliges Rauschen, `feColorMatrix` entfernt seine Farbe, damit es nicht sprenkelt, und ein Mischmodus mischt es in den Verlauf darunter. Höhere Werte für `baseFrequency` ergeben feinere Körnung, `stitchTiles` lässt die Kachel ohne Nähte wiederholen.

```css
.grainy {
  position: relative;
  isolation: isolate;
  background: linear-gradient(135deg, #1e1b4b 0%, #7c3aed 55%, #f472b6 100%);
}

.grainy::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: 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.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.18;
}
```

Ein Farbverlauf mit einfarbiger Körnung im Mischmodus Overlay. Das `z-index: -1` in einem isolierten Elternelement hält die Körnung über dem Verlauf, aber unter jedem Text.

Wenn du lieber ein Bild nimmst, funktioniert ein kleines, kachelbares Rauschbild als PNG genauso wie das SVG. Halte es verlustfrei: JPEG-Rauschkacheln bekommen Kompressionsartefakte. Weitere Muster und Texturtricks ohne Bilder findest du unter [Rauschtextur in CSS](https://gradiently.design/de/guide/css-noise-texture).

## So fügst du in Design-Tools Körnung hinzu

1. **Bau zuerst den Farbverlauf** Bring Farben, Farbstopps und Komposition auf einer sauberen Ebene in Ordnung. Körnung rettet keinen matschigen Übergang, siehe [matschige Farbverläufe](https://gradiently.design/de/guide/muddy-gradients).
2. **Füge eine eigene Rauschebene hinzu** Nutze den Rauscheffekt des Tools oder eine Rauschtextur auf einer eigenen Ebene über dem Verlauf, damit du sie anpassen kannst, ohne die Farbe anzufassen.
3. **Mach sie einfarbig** Entsättige das Rauschen, damit es keine farbigen Sprenkel hinzufügt, und stell die Ebene dann auf Ineinanderkopieren oder Weiches Licht.
4. **Senk die Deckkraft, bis sie verschwindet, dann geh ein Stück zurück** Die richtige Menge liegt meist knapp über dem Punkt, an dem du sie nicht mehr bemerkst.
5. **Exportiere in Endgröße, möglichst verlustfrei** Wer ein körniges Bild hochskaliert, vergrößert die Körnung zu Flecken. Exportiere PNG in exakter Größe oder ein hochwertiges JPEG für Fotos.

## Körnung im Druck

Körnung, die für einen Handybildschirm gestaltet ist, kann sich auf Papier anders verhalten. Bei 300 dpi kann sehr feines Rauschen ganz verschwinden, und grobes Rauschen kann wie ein Druckfehler aussehen. Für Poster und Flyer erzeuge die Körnung in Druckauflösung und prüf sie mit einem Proof auf dem echten Papier. [Farbverläufe drucken](https://gradiently.design/de/guide/print-gradients) behandelt den Rest des Ablaufs.

Körnung ist außerdem nur eines von mehreren Materialien. Papier, Glas und Seide verändern jeweils, was ein Farbverlauf aussagt, [Farbverlauf-Texturen](https://gradiently.design/de/guide/gradient-texture) vergleicht sie. Jeder Mark trägt seine eigene Körnungseinstellung neben Farben und Materialien, die Balance steht also schon, wenn du mit dem Gestalten anfängst.

## FAQ

### Was ist ein Farbverlauf mit Körnung?

Ein Farbverlauf mit Körnung ist ein Farbübergang mit einer feinen Schicht zufälligen Rauschens darüber, sodass er texturiert wie Film oder Druck wirkt statt perfekt glatt.

### Behebt Körnung Banding bei Farbverläufen?

Meistens ja. Zufälliges Rauschen bricht die harten Kanten zwischen den begrenzten Farbtönen eines Bildschirms auf, sodass die Streifen nicht mehr sichtbar sind.

### Wie füge ich einem Farbverlauf in CSS Körnung hinzu?

Leg ein SVG-Rauschbild mit `feTurbulence` über den Verlauf, entsättige es, setz `mix-blend-mode: overlay` und nutze eine geringe Deckkraft.

### Wie viel Körnung sollte ich hinzufügen?

Weniger, als du denkst. Fang niedrig an, prüf bei 100 % Zoom auf dem Zielgerät und hör kurz nach dem Punkt auf, an dem die Körnung nicht mehr offensichtlich ist.

### Warum sieht meine Körnung fleckig aus?

Wahrscheinlich wurde das Bild nach dem Hinzufügen der Körnung hochskaliert. Füge Körnung in der finalen Exportgröße hinzu oder nutze eine kachelbare Rauschtextur.