# Verträumte Verläufe: dunstige Pastelltöne und weiches Licht

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

Verträumte Verläufe sehen aus wie frühes Licht durch einen Vorhang: hell, dunstig und leicht warm. Hier steht, was sie funktionieren lässt, acht Codes zum Kopieren und die Schriftfarbe, die darauf lesbar ist.

## The short version

- Ein verträumter Verlauf nutzt helle, wenig gesättigte Farben, die im Farbton nah beieinanderliegen und ohne harte Kanten ineinander übergehen.
- Das verträumte Gefühl entsteht durch Licht: eine weiche, helle Fläche außerhalb der Mitte, die in einen dunstigen Grund ausläuft.
- Verträumte Verläufe lesen sich am besten mit einer tiefen, getönten Schriftfarbe wie Pflaume oder Schiefer statt mit weißem oder reinschwarzem Text.
- Ein Übergang in OKLCH hält helle Farben in der Mitte sauber, wo ein Übergang in sRGB kreidig oder grau werden kann.
- Feine Körnung verhindert, dass helle Verläufe Streifen zeigen, wenn sie für Social Media komprimiert werden.

Ein **verträumter Verlauf** ist ein heller, dunstiger Übergang zwischen Farben, die nah beieinanderliegen, Flieder in Pfirsich, Rosé in Creme, beleuchtet von einem weichen Punkt, sodass er wie Licht wirkt statt wie Farbe. Drei Dinge lassen ihn funktionieren: wenig gesättigte Töne, Kanten so weich, dass man nicht sieht, wo eine Farbe endet, und ein heller Kern außerhalb der Mitte. Unten findest du acht Codes zum Kopieren, eine Methode, um deinen eigenen zu bauen, und die Schriftfarbe, die Worte auf etwas so Hellem lesbar hält.

## Was einen Verlauf verträumt wirken lässt

Verträumt ist eine Stimmung, also hilft es, die Teile zu benennen. Ein verträumter Verlauf ist überwiegend sehr hell: Fast jede Farbe darin ginge in einem dämmrigen Raum als Weiß durch. Die Farbtöne sind Nachbarn, sodass der Übergang nie durch Grau läuft. Und das Licht hat eine Richtung. Eine Fläche ist heller und wärmer, als stünde die Sonne knapp außerhalb des Bildes, und alles andere fällt davon in Dunst ab.

- Morgencreme: #fdf6f0
- Roséschleier: #fbe3e8
- Fliederdunst: #efe1fb
- Puderhimmel: #dde7fb
- Pfirsichlicht: #fde8d4
- Pflaumentinte: #4a3352

Fünf Töne, die zusammengehören, und eine tiefe Schriftfarbe. Die Töne teilen eine Helligkeit, sodass zwei beliebige davon sauber ineinander übergehen; die Pflaume ist für Worte da.

Vergleiche das mit einem [Pastellverlauf](https://gradiently.design/de/guide/pastel-gradients), der flach und fröhlich sein kann, oder einem [unscharfen Verlauf](https://gradiently.design/de/guide/blurry-gradient), der jede beliebige Farbe haben kann. Verträumt liegt dazwischen: Pastellfarben, weichgezeichnetes Licht und ein wenig Dunst darüber.

## Codes für verträumte Verläufe zum Kopieren

Jeder davon ist ein einzelner CSS-Wert. Radiale Verläufe mit einer Ellipse außerhalb der Mitte vermitteln eine Lichtquelle; die zwei linearen sind für Banner und lange Streifen, bei denen ein radialer schief wirken würde.

- Erstes Licht: `radial-gradient(ellipse 90% 70% at 30% 25%, #fde8d4 0%, #fbe3e8 35%, #efe1fb 70%, #f6f2fb 100%)`
- Fliedermorgen: `radial-gradient(ellipse 80% 80% at 70% 30%, #fbe3e8 0%, #efe1fb 45%, #dde7fb 100%)`
- Fensterschein: `radial-gradient(ellipse 100% 70% at 50% 0%, #fff4e6 0%, #fde2e4 40%, #e9e3f7 100%)`
- Seenebel: `radial-gradient(ellipse 85% 75% at 25% 70%, #e0f2f1 0%, #e6e9fb 45%, #f5e9f7 100%)`
- Dunst zur goldenen Stunde: `radial-gradient(ellipse 90% 80% at 65% 60%, #fcefd8 0%, #f8dde0 40%, #e8dcef 80%, #dcd6ea 100%)`
- Perlmutt: `linear-gradient(160deg in oklch, #f9e7ef 0%, #ece3fa 50%, #dfeafb 100%)`
- Wolkendämmerung: `linear-gradient(180deg, #dfe6f7 0%, #ecdff3 45%, #fbe6dc 100%)`
- Mondlicht Lavendel: `radial-gradient(ellipse 80% 70% at 40% 35%, #f3e8ff 0%, #d9d3f2 45%, #b8b6dc 100%)`

Acht verträumte Verläufe. Selbst der tiefste Stopp jedes einzelnen ist noch hell, und genau das hält die Stimmung weich.

Mondlicht Lavendel ist der einzige mit einem etwas tieferen Rand. Er passt zu Abendthemen, Schlaf-Apps und Playlists mit Schlafliedern, wo reine Creme zu hell wirken würde.

## So baust du deinen eigenen verträumten Verlauf

1. **Eine Farbtonfamilie wählen** Wähle zwei oder drei Farbtöne, die innerhalb etwa einer Vierteldrehung des Farbkreises liegen: Rosa, Flieder und Blau, oder Pfirsich, Rosé und Flieder. Gegensätze wie Pfirsich und Blau treffen sich in Grau, das Problem aus [schlammige Verläufe](https://gradiently.design/de/guide/muddy-gradients).
2. **Helligkeit hoch, Sättigung runter** Schieb jede Farbe nah an Weiß. In OKLCH zielst du auf eine Helligkeit um 0,92 bis 0,96 und ein Chroma unter etwa 0,05. Die Farbe soll eine Andeutung sein, keine Aussage.
3. **Das Licht platzieren** Setze den wärmsten, hellsten Stopp in die Mitte einer Ellipse und verschiebe diese Mitte aus dem Zentrum, meist in eine obere Ecke. Licht, das von irgendwo kommt, macht aus hell verträumt.
4. **Die Stopps strecken** Verteile die Stopps weit, sodass kein Band schmaler als ein Drittel des Bildes ist. Enge Stopps erzeugen Ringe, und Ringe zerstören den Dunst.
5. **Einen Hauch Körnung hinzufügen** Eine feine Rauschebene mit sehr geringer Deckkraft lässt die Fläche wie Film oder Papier wirken und verbirgt Streifen. [Körnige Verläufe](https://gradiently.design/de/guide/grainy-gradients) zeigt, wie.

Nach den Schritten gebaut: `radial-gradient(ellipse 95% 75% at 28% 22%, oklch(0.97 0.03 60) 0%, oklch(0.94 0.04 10) 40%, oklch(0.92 0.045 300) 75%, oklch(0.93 0.035 260) 100%)`

Pfirsichlicht oben links, Rosé, dann Flieder und ein zartes Blau am äußersten Rand. Jeder Stopp liegt über 0,9 Helligkeit.

## Ein verträumter Verlaufshintergrund in CSS

Ein radialer Verlauf ergibt ein Licht. Zwei oder drei, über eine helle Basis gelegt, ergeben die treibende, wolkige Qualität, die man mit verträumt meint. Lass die Übergänge in OKLCH laufen, damit die Mitten sauber bleiben; [Verlaufsinterpolation](https://gradiently.design/de/guide/gradient-interpolation) erklärt, warum.

```css
.dreamy {
  min-height: 100vh;
  background-color: #f6f2fb; /* fallback */
  background-image:
    radial-gradient(ellipse 60% 50% at 20% 15% in oklch, #fde8d4 0%, transparent 70%),
    radial-gradient(ellipse 55% 60% at 85% 35% in oklch, #efe1fb 0%, transparent 70%),
    radial-gradient(ellipse 70% 55% at 50% 100% in oklch, #dde7fb 0%, transparent 70%),
    linear-gradient(170deg, #fbf3f6 0%, #f3eefb 100%);
}
```

Drei weiche Lichter über einer hellen Basis: Pfirsich oben links, Flieder rechts, Puderblau, das von unten aufsteigt.

> **Helle Verläufe zeigen zuerst Streifen** Sehr helle Übergänge haben wenige unterscheidbare Farbwerte zwischen ihren Stopps, sodass starke Kompression sichtbare Streifen daraus macht. Exportiere für Social-Media-Beiträge als PNG und füge Körnung hinzu. [Streifenbildung in Verläufen](https://gradiently.design/de/guide/gradient-banding) behandelt die Lösungen.

## So setzt du Text auf einen verträumten Verlauf

Weißer Text verschwindet auf einem verträumten Verlauf, und reines Schwarz wirkt hart, als hätte jemand ein Formular auf ein Aquarell gestempelt. Die Lösung ist eine tiefe Schriftfarbe aus derselben Familie: Pflaume auf einem Übergang aus Rosa und Flieder, Schieferblau auf einem nebligen, ein warmes Braun auf Pfirsich. Sie liest sich klar und fühlt sich trotzdem wie ein Teil des Bildes an.

### Vermeiden

- Weiße oder hellgraue Schrift
- Reines Schwarz in einem schweren Schnitt
- Den hellsten Kern hinter der Überschrift
- Dünne Schreibschrift in kleinen Größen
- Einen Kasten oder Schein hinter den Worten, um den Kontrast zu retten

### Machen

- Eine tiefe, getönte Schriftfarbe: Pflaume, Schiefer, Kakao
- Regular- oder Medium-Schnitte mit großzügigem Abstand
- Worte im ruhigeren, gleichmäßigen Teil des Dunstes
- Eine Serifenschrift oder weiche Sans in selbstbewusster Größe
- Kontrast dort geprüft, wo jede Zeile tatsächlich steht

Ein heller, verträumter Zitatbeitrag, bei dem der hellste Teil des Verlaufs hinter dem Text liegt und ihn auswäscht

Der helle Kern landet hinter den Worten, und die Zeile verblasst.

Derselbe verträumte Zitatbeitrag mit einer ruhigeren Fläche des Verlaufs hinter dem Text, der nun klar lesbar ist

Derselbe Beitrag mit der ruhigen Fläche hinter den Worten und einer tieferen Schriftfarbe.

Hier verdient sich Gradiently seinen Platz. Ein Mark weiß, wo die Worte stehen: Er legt seine ruhigste Region dahinter, vertieft die Farben nahe den Buchstaben und wählt pro Zeile helle oder dunkle Schrift aus seiner eigenen Palette, sodass ein weicher Hintergrund dich nie Lesbarkeit kostet. Die allgemeinen Regeln findest du in [Text auf einem Verlauf](https://gradiently.design/de/guide/text-on-gradient).

## Wo verträumte Verläufe funktionieren

Verträumt wirkt sanft, persönlich und ohne Eile. Das macht es für manche Marken richtig und für andere falsch. Ein Rabatt-Countdown in Fliederdunst wirkt verwirrt; ein Skincare-Launch darin wirkt genau richtig.

- **Wellness und Hautpflege:** Produktneuheiten, Routinen und Zitate, meist als Instagram-Beiträge in 1080×1350.
- **Hochzeiten und Einladungen:** eine Einladung in 5×7 Zoll mit 1500×2100 und einem Hauch aus Pfirsich und Rosé samt Namen in einer Serifenschrift.
- **Musik und Audio:** ein Spotify Canvas in 1080×1920 oder ein Apple-Podcasts-Cover in 3000×3000 für ruhige Shows, Schlaf oder Ambient.
- **Journale und Newsletter:** ein Substack-Beitragsheader in 1456×816, der vor dem ersten Wort einen leisen Ton setzt.
- **Handy-Hintergründe und Storys:** weich genug, um hinter Icons oder Stickern zu liegen, ohne mit ihnen zu kämpfen.

Ein quadratisches Podcast-Cover namens Night Garden auf einem weichen, verträumten Hintergrund aus Lavendel und Pfirsich

Ein Podcast-Cover in 3000×3000. Verträumte Farbe sagt Hörenden, wie sich die Show anfühlt, bevor sie den Titel lesen.

Wird verträumt zum Look deiner Marke statt zu einem einzelnen Beitrag, überleg, ihn zu etwas zu machen, das sonst niemand nutzen kann. Jeder Mark auf Gradiently hat zu jeder Zeit einen Inhaber, sodass ein dunstiges Flieder, das du sicherst, dir gehört und in jeder Größe, in der du gestaltest, frisch gerendert wird. Für die größere Familie weicher Looks siehe [Polarlicht-Verläufe](https://gradiently.design/de/guide/aurora-gradients).

## FAQ

### Welche Farben ergeben einen verträumten Verlauf?

Helle, wenig gesättigte Töne, die auf dem Farbkreis nah beieinanderliegen: Rosé, Flieder, Puderblau, Pfirsich und Creme. Halte jeden Stopp sehr hell.

### Was ist der Unterschied zwischen einem Pastellverlauf und einem verträumten Verlauf?

Pastell beschreibt die Farben. Verträumt ergänzt weiches, gerichtetes Licht und Dunst, sodass der Verlauf beleuchtet wirkt statt flach.

### Welche Textfarbe funktioniert auf einem verträumten Verlauf?

Eine tiefe Schriftfarbe aus derselben Familie, etwa Pflaume, Schieferblau oder Kakao. Weiß verschwindet auf hellen Hintergründen, und reines Schwarz kann hart wirken.

### Warum hat mein verträumter Verlauf Streifen?

Helle Übergänge haben wenige Farbstufen zwischen den Stopps, sodass Kompression sie als Bänder zeigt. Exportiere als PNG, verteile die Stopps weiter und füge feine Körnung hinzu.

### Wie erstelle ich einen verträumten Verlauf in CSS?

Lege zwei oder drei radiale Verläufe außerhalb der Mitte, die ins Transparente auslaufen, über eine helle lineare Basis und lass sie `in oklch` ineinander übergehen, damit die Mitten sauber bleiben.