# Warum dein Farbverlauf Streifen hat und wie du Banding behebst

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

Du hast einen sanften Farbverlauf gemacht, und er kam gestreift zurück. Das ist Banding, es hat eine einfache Ursache und eine Handvoll verlässlicher Lösungen. Hier ist zuerst die Rechnung, dann die Heilmittel.

## The short version

- Banding im Farbverlauf ist das Auftreten sichtbarer Streifen oder Stufen in einem Übergang, der sanft sein sollte.
- Banding entsteht, weil die meisten Bilder nur 256 Stufen pro Farbkanal speichern, sodass ein feiner Übergang über eine große Fläche zwischen wenigen Tönen springen muss.
- Banding ist am schlimmsten bei dunklen, feinen und großen Farbverläufen sowie bei stark komprimierten Bildern oder Videos.
- Feine Körnung oder Dithering hinzuzufügen ist die verlässlichste Lösung, weil zufällige Variation die Kanten zwischen den Stufen verbirgt.
- Hochwertig zu exportieren, 256-Farben-Formate wie GIF zu meiden und den Farbbereich des Übergangs zu erweitern verringern Banding weiter.

**Banding im Farbverlauf** heißt, dass ein sanfter Farbverlauf sichtbare Streifen oder Stufen statt eines kontinuierlichen Übergangs zeigt. Es passiert, weil digitale Bilder pro Farbe nur eine begrenzte Anzahl an Tönen speichern können, meist 256 pro Kanal, und wenn sich ein Farbverlauf langsam über eine breite Fläche ändert, muss jeder Ton ein Band aus Pixeln abdecken. Dein Auge erkennt Kanten sehr gut und hebt diese Bänder heraus. Die Lösung ist meist, feine Körnung hinzuzufügen, mit weniger Kompression zu exportieren oder dem Übergang mehr Farbe zum Arbeiten zu geben.

## Was Banding im Farbverlauf verursacht

Die meisten Bilder nutzen 8 Bit pro Kanal: je 256 mögliche Werte für Rot, Grün und Blau. Das klingt nach reichlich, und für einen kräftigen Farbverlauf ist es das auch. Das Problem beginnt, wenn die Farben an beiden Enden nah beieinanderliegen.

Nimm einen grauen Farbverlauf von `#202020` zu `#303030` über einen Bildschirm mit 1920 Pixeln Breite. Jeder Kanal bewegt sich nur von 32 bis 48, das sind 16 Stufen. Der Farbverlauf enthält also 16 verschiedene Töne, jeder etwa 120 Pixel breit. Keine Software kann ihn glatter machen, weil es keine Töne dazwischen gibt.

- Mit Banding: acht sichtbare Stufen: `linear-gradient(90deg, #1e1b4b 0% 12.5%, #211d52 12.5% 25%, #242059 25% 37.5%, #272260 37.5% 50%, #2a2467 50% 62.5%, #2d266e 62.5% 75%, #302875 75% 87.5%, #332a7c 87.5% 100%)`
- Gewollt: ein sanfter Übergang: `linear-gradient(90deg, #1e1b4b 0%, #332a7c 100%)`

Das obere Farbfeld übertreibt Banding mit acht harten Stufen, damit du es auf jedem Bildschirm siehst. Echtes Banding sieht aus wie die weichen Streifen, die entstehen, wenn ein dunkler, feiner Übergang wie der zweite breit gezogen oder komprimiert wird.

## Wo Banding am häufigsten auftritt

| Situation | Warum es Banding zeigt |
| --- | --- |
| Dunkle Farbverläufe | Menschen sehen kleine Unterschiede zwischen dunklen Tönen leicht, und dunkle Übergänge umfassen oft nur wenige Werte |
| Feine, kontrastarme Übergänge | Wenige Stufen zwischen den Endfarben, deshalb ist jedes Band breit |
| Große Flächen | Dieselbe Zahl an Stufen über mehr Pixel ergibt breitere Bänder |
| JPEG und Social-Uploads | Kompression vereinfacht sanfte Flächen zu flachen Blöcken |
| Video | Streaming-Codecs und 8-Bit-Video verflachen sanfte Verläufe, besonders in dunklen Szenen |
| GIF und PNG-8 | Nur 256 Farben im ganzen Bild, für alle Kanäle zusammen |

Ein dunkler, feiner Vollbild-Farbverlauf, als komprimiertes JPEG hochgeladen, trifft fast jede Zeile auf einmal.

Deshalb brauchen [dunkle Farbverlauf-Hintergründe](https://gradiently.design/de/guide/dark-gradient-backgrounds) und [Aurora-Farbverläufe](https://gradiently.design/de/guide/aurora-gradients) die meiste Sorgfalt. Ihre Schönheit hängt von langen, sanften Verläufen durch dunkle Töne ab, genau das Rezept für Banding.

## So behebst du Banding im Farbverlauf

1. **Körnung oder Dithering hinzufügen** Eine feine Schicht zufälligen Rauschens verstreut Pixel zwischen benachbarten Tönen, sodass das Auge die Kanten nicht mehr findet. Es ist die verlässlichste Lösung und lässt die Oberfläche außerdem reicher wirken. Siehe [körnige Farbverläufe](https://gradiently.design/de/guide/grainy-gradients).
2. **Dem Übergang mehr Spanne geben** Größere Unterschiede in Helligkeit oder Farbton zwischen den Endfarben bedeuten mehr verfügbare Stufen und schmalere Bänder. Ein Farbverlauf, der auch den Farbton etwas verschiebt, nutzt mehr Kombinationen aus Rot, Grün und Blau als eine reine Helligkeitsrampe.
3. **Wo möglich in 16 Bit arbeiten** Bildeditoren, die 16 Bit pro Kanal unterstützen, behalten beim Arbeiten weit mehr Stufen. Wandle erst beim Export in 8 Bit um, mit eingeschaltetem Dithering.
4. **In hoher Qualität exportieren** Nutze PNG für flache Grafiken oder JPEG mit hoher Qualitätseinstellung für fotografische Bilder. Meide GIF und PNG-8, die insgesamt nur 256 Farben behalten.
5. **In der endgültigen Größe exportieren** Ein kleines Farbverlaufsbild hochzuskalieren streckt seine Bänder. Rendere oder exportiere in der exakten Größe oder größer, statt hochzuskalieren.

> **Auch dein Bildschirm kann beteiligt sein** Manche Displays zeigen weniger Töne, als die Datei enthält, und Browser unterscheiden sich darin, ob sie Farbverläufe dithern. Prüfe wichtige Arbeit auf mehr als einem Bildschirm, auch auf einem Handy bei voller Helligkeit.

## Banding in CSS-Farbverläufen beheben

Browser rendern CSS-Farbverläufe live, es gibt also keine Exporteinstellung zu ändern. Zwei Dinge helfen. Erstens: die Rampe verbreitern oder eine Farbtonverschiebung hinzufügen. Zweitens: eine dezente Rauschschicht über den Farbverlauf legen, die genau wie Körnung in einem Bild wirkt. [CSS-Rauschtextur](https://gradiently.design/de/guide/css-noise-texture) zeigt leichte Wege, diese Schicht ohne große Bilddateien zu machen.

### Zeigt Banding

- `linear-gradient(#0b0b12, #14141f)` über einen ganzen Bildschirm
- Ein einzelner Farbton von Fast-Schwarz zu etwas weniger Schwarz
- Keine Textur über der Oberfläche

### Hält stand

- `linear-gradient(#0b0b12, #1e1b4b 60%, #312e81)` mit mehr Spanne
- Eine dunkle Rampe, die auch von Grau Richtung Indigo driftet
- Eine feine Rauschschicht bei niedriger Deckkraft obenauf

## Banding in Video und Social-Uploads beheben

Soziale Plattformen komprimieren hochgeladene Inhalte neu, und Video-Codecs sind dafür gebaut, genau die Art feiner Details wegzuwerfen, die Farbverläufe glatt hält. Körnung hilft hier doppelt: Sie verbirgt Stufen und gibt dem Encoder echte Details zum Behalten. Lade in der empfohlenen Größe der Plattform hoch, damit nicht nochmals skaliert wird, und exportiere Video mit großzügiger Qualitätseinstellung. Kodierst du mit ffmpeg, hat x264 eine Einstellung, die darauf abgestimmt ist, Körnung zu erhalten.

```bash
# High-quality H.264 that keeps fine grain instead of smoothing it into bands
ffmpeg -i gradient-loop.mov \
  -c:v libx264 -preset slow -crf 16 -tune grain \
  -pix_fmt yuv420p -movflags +faststart \
  gradient-loop.mp4
```

Niedrigeres `-crf` heißt höhere Qualität. `-tune grain` sagt dem Encoder, Rauschen zu behalten, statt es wegzuglätten.

Loop-Videohintergründe sind dafür besonders anfällig, weil sie meist dunkel und langsam sind. [Nahtlose Loop-Videos](https://gradiently.design/de/guide/seamless-loop-video) behandelt den Rest des Exports.

## Banding von Anfang an verhindern

- Wähle Farbverläufe mit genug Helligkeits- oder Farbtonänderung für ihre Größe
- Plane Körnung von Anfang an ein, statt sie als Rettung nachzurüsten
- Halte dunkle Farbverläufe etwas angehoben, statt bis zu reinem Schwarz zu rutschen
- Prüfe nach dem Hochladen auf einem Handy, nicht nur auf deinem Design-Monitor

Jeder Mark in Gradiently wird live in der Größe gerendert, in der du gestaltest, mit seiner Körnung als Teil des Rezepts, und Designs mit einem gesicherten Mark lassen sich als PNG oder JPEG bis zur dreifachen Größe des Designs exportieren, sodass ein Farbverlauf nie aus einem kleinen Bild gestreckt werden muss.

## FAQ

### Was ist Banding im Farbverlauf?

Banding im Farbverlauf sind sichtbare Streifen oder Stufen in einem Farbverlauf, der sanft aussehen sollte, verursacht durch zu wenige verfügbare Töne zwischen seinen Farben.

### Warum zeigen dunkle Farbverläufe mehr Banding?

Dunkle Übergänge umfassen oft nur wenige Werte pro Kanal, und Menschen bemerken kleine Unterschiede zwischen dunklen Tönen leicht, deshalb ist jede Stufe breit und sichtbar.

### Behebt hinzugefügtes Rauschen Banding?

Meistens ja. Feines Rauschen oder Dithering verstreut Pixel zwischen benachbarten Tönen, sodass das Auge die Kanten zwischen den Stufen nicht sieht.

### Welches Dateiformat ist für Farbverläufe am besten?

PNG für Grafiken und hochwertiges JPEG für fotografische Bilder. Meide GIF und PNG-8, die nur 256 Farben behalten.

### Warum zeigt mein Farbverlauf nach dem Hochladen in Social Media Banding?

Plattformen komprimieren Bilder und Video neu. Füge Körnung hinzu, lade in der empfohlenen Größe hoch und exportiere in hoher Qualität, um dem Encoder Details zum Behalten zu geben.