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

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.

Vergleiche das mit einem Pastellverlauf, der flach und fröhlich sein kann, oder einem unscharfen Verlauf, 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.

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. 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.

2. 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. 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. 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. 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 zeigt, wie.

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 erklärt, warum.

.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%);
}

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.

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.

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.

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.