Unscharfe Farbverläufe: weiche Farbe, die modern wirkt

Ein unscharfer Farbverlauf ist Farbe ohne Kanten: ein paar weiche Formen auf einem Grund, weichgezeichnet, bis nur noch Licht übrig ist, das von einem Farbton in den nächsten treibt. Er sieht aus wie ein Foto durch Milchglas oder ein unscharf gestelltes Objektiv vor einer beleuchteten Stadt. Diese Weichheit macht ihn passend für Wellness-Apps, Musik, Hautpflege, ruhige Technik und Hintergrundbilder. Die Methode ist einfach: erst Formen, dann viel Unschärfe, dann Körnung. Die Details unten machen den Unterschied zwischen verträumt und verschmiert.

Unscharfe Verläufe im Vergleich zu Aurora- und Mesh-Verläufen

Diese drei werden verwechselt, weil sie alle weich aussehen. Sie entspringen verschiedenen Ideen, und die richtige Wahl verändert das Briefing.

So machst du einen unscharfen Farbverlauf

1. 1

   Einen Grund wählen

   Ein blasses gebrochenes Weiß für luftig, eine tiefe Tinte für leuchtend. Der Grund füllt jede Lücke, die die Formen lassen.

2. 2

   Drei oder vier benachbarte Farben wählen

   Farben, die auf dem Farbkreis nah beieinanderliegen, etwa Rosa, Flieder und Himmelblau, verschmelzen zu sauberen Zwischentönen. Weitere Kombinationen findest du unter Analoge Farben.

3. 3

   Große, überlappende Formen zeichnen

   Drei bis fünf Kreise oder Ovale, jedes ein Viertel bis die Hälfte der Fläche groß. Lass einige über die Ränder laufen.

4. 4

   Kräftig weichzeichnen

   Wende einen Gaußschen Weichzeichner von etwa 10 bis 20 Prozent der kürzeren Seite der Fläche an. Bei einem Post mit 1080 Pixeln Breite sind das rund 110 bis 220 Pixel.

5. 5

   Körnung hinzufügen

   Eine feine Rauschebene mit 3 bis 6 Prozent Deckkraft versteckt Streifen und verhindert, dass das Ergebnis nach Plastik aussieht.

6. 6

   In Handygröße prüfen

   Verkleinere es. Hat eine Form noch eine sichtbare Kante, zeichne stärker weich oder mach die Form größer.

Farbrezepte für unscharfe Verläufe

Jedes Muster nähert den fertigen Look in einem einzigen Verlauf an, du kannst es also direkt in CSS kopieren oder die Farben für deine Formen verwenden. Elliptische radiale Verläufe mit versetzten Mittelpunkten kommen einer echten Unschärfe erstaunlich nahe.

Wähle die Familie danach, was darauf steht. Helle Unschärfen tragen dunkle Schrift gut und passen zu Hautpflege, Papeterie, Wellness und redaktionellen Covern. Dunkle Unschärfen lassen helle Schrift leuchten und passen zu Nachtleben, Musik und späten Events. Eine neutrale Unschärfe wie Leinen funktioniert als ruhige Kulisse für Produktfotos, bei denen die Farbe nie mit dem Gegenstand konkurrieren soll. Weitere weiche Paletten findest du unter Verträumte Farbverläufe.

Wie viel Unschärfe ein unscharfer Verlauf braucht

Die meisten unscharfen Verläufe scheitern daran, dass sie nicht unscharf genug sind. Eine Form, die auf einer Fläche mit 1080 Pixeln um 30 Pixel weichgezeichnet wird, ist immer noch eine Form mit weicher Kante und wirkt wie ein Fleck. Der Look braucht so viel Unschärfe, dass man nicht mehr erkennt, wo eine Form endet.

Ein unscharfer Farbverlauf in CSS

Im Web hast du zwei Wege. Geschichtete radiale Verläufe, die ins Transparente auslaufen, sind günstig und werden sofort gerendert. Echte weichgezeichnete Elemente wirken weicher und können treiben, kosten aber mehr Rechenleistung. Für einen statischen Hintergrund reichen Ebenen meist aus.

/* Route 1: layered radial gradients, no filter */
.blurry {
  background-color: #f8fafc;
  background-image:
    radial-gradient(ellipse 60% 50% at 20% 25%, #fbcfe8 0%, transparent 70%),
    radial-gradient(ellipse 55% 60% at 80% 30%, #e9d5ff 0%, transparent 70%),
    radial-gradient(ellipse 70% 55% at 50% 85%, #bfdbfe 0%, transparent 70%);
}

/* Route 2: real shapes, blurred */
.blurry-live {
  position: relative;
  overflow: hidden;
  background: #f8fafc;
}
.blurry-live .blob {
  position: absolute;
  width: 50vmax;
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.8;
}
.blurry-live .blob:nth-child(1) { background: #fbcfe8; left: -10vmax; top: -10vmax; }
.blurry-live .blob:nth-child(2) { background: #e9d5ff; right: -12vmax; top: 0; }
.blurry-live .blob:nth-child(3) { background: #bfdbfe; left: 20%; bottom: -20vmax; }

Brauchst du ein Milchglas-Panel über einem unscharfen Hintergrund statt des Hintergrunds selbst, ist das backdrop-filter, erklärt unter CSS-Backdrop-Filter.

Warum unscharfe Verläufe billig wirken, und die Lösung

Streifenbildung erwischt alle, weil Unschärfe lange, sanfte Übergänge über viele Pixel erzeugt. Etwas Körnung behebt das; Streifenbildung in Farbverläufen erklärt, warum. Und treffen zwei deiner Farben in Grau aufeinander, tausche eine gegen eine Nachbarfarbe, wie unter Matschige Farbverläufe beschrieben.

Die Marks von Gradiently umfassen weiche, diffuse Materialien mit eingebauter Körnung, und sie halten die Fläche hinter deinen Worten ruhig, sodass ein unscharfer Look nie die Überschrift verschluckt. Du kannst im Studio kostenlos mit jedem noch nicht gesicherten Mark gestalten.