# Wie ein Farbverlauf gut aussieht: ein Check in sieben Punkten

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

Die meisten schlechten Verläufe scheitern an denselben wenigen Tests. Schick jeden Übergang der Reihe nach durch diese sieben Prüfungen, und du weißt genau, was du ändern musst, bevor es jemand anderes sieht.

## The short version

- Ein Verlauf sieht gut aus, wenn seine Farben aufeinandertreffen, ohne grau zu werden, seine Stopps ungleichmäßig verteilt sind und sein Licht von einer Stelle zu kommen scheint.
- Graue oder matschige Mitten entstehen, wenn zwei gegensätzliche Farben direkt ineinander übergehen; eine Brückenfarbe oder Mischen in OKLCH behebt das.
- Ein wenig Körnung, etwa 2 bis 6 Prozent Deckkraft, versteckt Banding und lässt einen digitalen Verlauf wie eine Oberfläche wirken.
- Ein guter Verlauf lässt immer einen ruhigen Bereich, in dem Worte mit starkem Kontrast stehen können.
- Exportiere Verläufe als PNG oder hochwertiges Video statt als komprimiertes JPEG, das sichtbare Streifen erzeugt.

Ob ein Farbverlauf gut aussieht, entscheiden sieben Prüfungen, der Reihe nach: Farben, die sich treffen, ohne grau zu werden, ungleichmäßig gesetzte Stopps, Licht aus einer Richtung, ein Grund, der die Stimmung setzt, ein Hauch Körnung, ein ruhiger Platz für Worte und ein Export, der alles weich hält. Jede ist ein schneller Test mit klarer Lösung. Fast jeder Verlauf, der billig aussieht, fällt bei mindestens zwei davon durch, und diese zwei zu beheben bringt meist mehr, als die Farben komplett zu tauschen.

| Prüfung | Der Test | Wenn sie scheitert |
| --- | --- | --- |
| 1. Saubere Mitte | Ist die Mitte grau oder braun? | Brückenfarbe einfügen oder in OKLCH mischen |
| 2. Ungleiche Stopps | Ist jede Farbe gleich breit? | Einer Farbe den meisten Platz geben |
| 3. Ein Licht | Kannst du sagen, wo das Licht ist? | Eine Seite oder Ecke aufhellen |
| 4. Ein Grund | Ist er klar dunkel oder klar hell? | Die Basis dunkler oder heller ziehen |
| 5. Körnung | Siehst du Streifen? | 2 bis 6 Prozent Rauschen hinzufügen |
| 6. Platz für Worte | Ist der Text überall lesbar? | Den Bereich dahinter beruhigen |
| 7. Export | Übersteht er den Upload? | PNG für Standbilder, hohe Bitrate für Video |

Der ganze Check auf einer Seite. Geh ihn von oben nach unten durch; spätere Lösungen bauen auf früheren auf.

## 1. Farben, die sich sauber treffen

Wenn zwei Farben, die sich auf dem Farbkreis gegenüberliegen, direkt ineinander übergehen, fällt die Mitte ins Grau. Blau zu Orange und Grün zu Pink sind die üblichen Verdächtigen. Füg entweder eine Brückenfarbe dazwischen ein, damit der Übergang um den Kreis wandert statt durch die Mitte, oder misch in einem wahrnehmungsbasierten Farbraum. [Matschige Verläufe](https://gradiently.design/de/guide/muddy-gradients) und [Interpolation von Farbverläufen](https://gradiently.design/de/guide/gradient-interpolation) erklären beides.

- Scheitert: graue Mitte: `linear-gradient(90deg, #2563eb 0%, #f97316 100%)`
- Besteht: Magenta als Brücke: `linear-gradient(90deg, #2563eb 0%, #c026d3 50%, #f97316 100%)`
- Besteht: in OKLCH gemischt: `linear-gradient(90deg in oklch, #2563eb 0%, #f97316 100%)`

Dieselben zwei Farben auf drei Arten. Eine Brücke oder ein wahrnehmungsbasierter Übergang hält die Mitte lebendig.

## 2. Ungleichmäßig gesetzte Stopps

Gleichmäßig verteilte Farben wirken wie eine Rampe aus einer Voreinstellung. In der Natur dominiert meist eine Farbe, und der Wechsel passiert auf kurzer Strecke: Ein Himmel ist größtenteils blau mit einem schmalen warmen Band am Horizont. Gib deiner Hauptfarbe 60 bis 70 Prozent des Bildes und lass die anderen spät kommen. [Farbstopps in Verläufen](https://gradiently.design/de/guide/gradient-stops) geht tiefer auf Platzierung und Übergangshinweise ein.

- Gleichmäßige Drittel: `linear-gradient(180deg, #1e3a8a 0%, #7c3aed 50%, #f472b6 100%)`
- Nach oben gewichtet: `linear-gradient(180deg, #1e3a8a 0%, #312e81 55%, #7c3aed 82%, #f472b6 100%)`

Dieselben drei Farben. Die gewichtete Version hat eine Stimmung; die gleichmäßige eine Formel.

## 3. Licht aus einer Richtung

Ein guter Verlauf wirkt beleuchtet. Leg fest, woher das Licht kommt, meist aus einer oberen Ecke, und mach diesen Bereich zum hellsten und gesättigtsten. Alles andere fällt davon ab. Kannst du nicht auf die Lichtquelle zeigen, wirkt der Verlauf flach, egal welche Farben du nutzt. Ein weicher [radialer Verlauf](https://gradiently.design/de/guide/radial-gradient) über einem linearen ist der schnellste Weg dahin.

## 4. Ein Grund, der die Stimmung setzt

Entscheide, ob das Design dunkel oder hell ist, und bleib dabei. Ein Verlauf, der von mittlerem Violett zu mittlerem Pink wandert, hat keinen Grund und wirkt unentschlossen. Eine fast schwarze Basis lässt Farben leuchten; ein warmes Off-White lässt sie gedruckt wirken. Zieh die Basis weiter, als es sich bequem anfühlt, und nimm dann einen Schritt zurück.

- Kein Grund: `linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%)`
- Dunkler Grund, beleuchtete Ecke: `radial-gradient(circle at 80% 20%, #ec4899 0%, #6d28d9 30%, #1e0b3a 65%, #0c0618 100%)`
- Heller Grund, beleuchtete Ecke: `radial-gradient(circle at 20% 20%, #fbcfe8 0%, #f5e8ff 40%, #faf7f2 80%)`

Prüfung 3 und 4 zusammen. Ein klarer Grund und ein Licht machen aus einer Voreinstellung eine Szene.

## 5. Körnung: das richtige Rauschverhältnis

Perfekt glatte digitale Verläufe zeigen auf vielen Bildschirmen Streifen, und sie sehen nach Software-Standard aus. Eine feine Rauschschicht löst beides. Der nützliche Bereich ist schmal: Unter etwa 2 Prozent Deckkraft siehst du es nicht, über etwa 8 Prozent wirkt es wie eine bewusste Textur statt wie ein Finish. Für dunkle Verläufe fang bei 3 Prozent an, für blasse bei 5 Prozent, weil Rauschen auf hellen Farben schwerer zu sehen ist.

```css
.gradient {
  position: relative;
  background: radial-gradient(circle at 80% 20%, #ec4899 0%, #6d28d9 30%, #1e0b3a 65%, #0c0618 100%);
}

.gradient::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.04;
  mix-blend-mode: overlay;
  pointer-events: none;
}
```

Eine kachelbare SVG-Rauschschicht mit 4 Prozent. Erhöhe oder senke die Deckkraft in einzelnen Schritten und behalte dabei den dunkelsten Bereich im Blick.

Weitere Rezepte für Körnung findest du in [körnige Farbverläufe](https://gradiently.design/de/guide/grainy-gradients) und [Rauschtextur mit CSS](https://gradiently.design/de/guide/css-noise-texture).

## 6. Ein ruhiger Platz für Worte

Die meisten Verläufe sollen eine Botschaft tragen. Finde heraus, wo die Worte hinkommen, und sorg dafür, dass dieser Bereich der ruhigste und tonal gleichmäßigste ist, damit jede Zeile denselben Kontrast hat. Der hellste, unruhigste Teil des Verlaufs gehört woandershin. Behebe schlechten Kontrast nie mit einem Leuchten hinter den Buchstaben: Verschieb stattdessen das Licht.

Ein Sale-Post, bei dem ein Teil der Überschrift auf einem hellen Fleck des Verlaufs sitzt und an Kontrast verliert

Scheitert bei Prüfung 6: Die Farbe läuft direkt durch die Worte.

Derselbe Sale-Post mit einem ruhigeren, gleichmäßigen Bereich hinter der Überschrift, sodass alle Worte klar lesbar sind

Besteht: Der Bereich hinter dem Text ist ruhiger, und jede Zeile ist lesbar.

Diese Prüfung übernimmt Gradiently für dich. Ein Mark weiß, wo deine Worte stehen: Sein ruhigster Bereich wandert hinter den Text, Farben nahe den Buchstaben werden tiefer oder heller, und die automatische Schriftfarbe wählt für jede Zeile helle oder dunkle Schrift aus der Palette des Marks.

## 7. Ein Export, der alles weich hält

- **Standbilder:** als PNG exportieren. JPEG-Kompression macht aus langen Übergängen Stufen, und Social Apps komprimieren beim Upload noch einmal.
- **Video:** ein MP4 mit hoher Bitrate in exakter Plattformgröße nutzen, damit nichts neu skaliert wird.
- **Größe:** in den Maßen der Plattform exportieren, etwa 1080×1350 für einen Instagram-Post, statt die App zuschneiden zu lassen.
- **Auf dem Handy prüfen:** die hochgeladene Version ansehen, in einem dunklen Raum, bei voller Helligkeit. Dort versteckt sich Banding.

Wenn Streifen all das überleben, hat [Banding bei Farbverläufen](https://gradiently.design/de/guide/gradient-banding) die tieferen Lösungen.

## FAQ

### Wie sieht ein Farbverlauf gut aus?

Nutz Farben, die ohne Grau ineinander übergehen, setz Stopps ungleichmäßig, beleuchte aus einer Richtung, entscheide dich für einen dunklen oder hellen Grund, füg etwas Körnung hinzu und lass einen ruhigen Platz für Worte.

### Wie viel Rauschen sollte ich einem Verlauf hinzufügen?

Meist 2 bis 6 Prozent Deckkraft. Fang bei dunklen Verläufen um 3 Prozent an, bei blassen um 5 Prozent, und hör auf, sobald die Streifen verschwinden.

### Warum sieht mein Verlauf matschig aus?

Zwei gegensätzliche Farben gehen durch Grau ineinander über. Füg eine Brückenfarbe dazwischen ein oder misch in OKLCH.

### Warum sieht mein Verlauf billig aus?

Vermutlich sind es zwei Farben, gleichmäßig verteilt, im 45-Grad-Winkel, ohne Körnung. Das sind die Standards der meisten Tools, also wirken sie unüberlegt.

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

PNG für Standbilder und MP4 mit hoher Bitrate für Video. Komprimiertes JPEG zeigt Banding in langen, weichen Übergängen.