Weißer Farbverlauf: dezente helle Codes für klare Designs

Ein weißer Farbverlauf geht von reinem Weiß in ein Off-White, das nur etwas dunkler ist, meist mit sanftem warmem, kühlem oder perlmuttartigem Stich. Die Veränderung ist absichtlich klein: Er soll wie Licht wirken, das über eine Fläche fällt, nicht wie Farbe. Das macht weiße Verläufe ideal für klare Websites, Produktfotos, Einladungen und minimalistische Social-Posts. Unten findest du, wie stark einer sein sollte, eine Palette von Off-Whites, kopierbare Codes und den richtigen Weg, in CSS zu Weiß auszublenden.

Wie viel Veränderung ein weißer Verlauf braucht

Zu wenig, und niemand sieht ihn, besonders auf einem Handy bei voller Helligkeit. Zu viel, und das Weiß wird grau und trüb. Die Tabelle nennt drei Stärken, gemessen daran, wie weit die Endfarbe unter reinem Weiß liegt. Die meisten Designs wollen die mittlere.

Off-White-Farben zum Aufbauen

Reine neutrale Grautöne am Ende eines weißen Verlaufs wirken etwas leblos. Eine Spur Tönung macht den Unterschied: Warme Off-Whites wirken wie Papier, Leinen und Elfenbein; kühle wie Porzellan, Frost und Schnee. Wähle den Ton, der zum Rest deiner Palette passt, und halte ihn über eine Reihe von Designs hinweg einheitlich.

Weißer Farbverlauf Codes

Jeder davon beginnt bei oder nahe reinem Weiß. Papier und Elfenbein sind warm und redaktionell. Porzellan und Frost sind kühl und technisch. Morgenlicht fügt einen weichen Schein aus einer Ecke hinzu, und Perle mischt mehrere kaum vorhandene Töne zu einer zarten Irisierung, die nie in einen Regenbogen kippt.

Willst du etwas mehr Farbe bei gleichem luftigem Gefühl, sind Pastell-Farbverläufe der nächste Schritt. Für das andere Ende der Neutralskala sieh dir die Codes für den grauen Farbverlauf an.

Ein weißer Verlauf hinter Produkten

Fotografen leuchten einen weißen Hintergrund so aus, dass er zu den Rändern weich abfällt, was das Objekt ohne Schattenlinie vom Hintergrund trennt. Ein radialer weißer Verlauf leistet am Bildschirm dasselbe. Besonders nützlich ist er, wenn du ein Produkt aus seinem Foto freistellst: Ein flaches Weiß dahinter wirkt aufgeklebt, während eine weiche Hohlkehle wie ein Studio aussieht.

Hintergründe für Produktfotos behandelt Schatten, farbige Hintergründe und wann Weiß die falsche Wahl ist.

Mit einem CSS-Verlauf zu Weiß ausblenden

Der häufigste weiße Verlauf im Web ist gar kein Hintergrund: Es ist ein Ausblenden, das das Ende eines gekürzten Artikels, den unteren Rand einer scrollenden Liste oder den Rand eines Fotos weicher macht. Schreibe das transparente Ende als Weiß mit null Deckkraft. Moderne Browser mischen transparent korrekt, aber rgb(255 255 255 / 0) sagt genau, was du meinst, und vermeidet das gräuliche Band, das manche älteren Engines zeichneten.

/* soften the end of a clipped block of text */
.excerpt {
  position: relative;
  max-height: 12rem;
  overflow: hidden;
}

.excerpt::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 5rem;
  background: linear-gradient(180deg, rgb(255 255 255 / 0) 0%, #ffffff 90%);
  pointer-events: none;
}

Ist dein Seitenhintergrund ein Off-White statt reinem Weiß, blende stattdessen zu dieser Farbe aus, sonst endet das Ausblenden in einem sichtbar helleren Streifen. CSS-Verlauf transparent geht tiefer auf Ausblendungen und Overlays ein.

Sauberes Weiß, nicht ausgewaschen

Weiße Verläufe zeigen auch Banding, wenn auch weniger als dunkle; siehst du Stufen auf einem großen Monitor, behebt eine sehr feine Körnung das, wie unter Verlaufs-Banding erklärt.

Weiße Verläufe in minimalistischen Designs

Minimalistische Designs stehen und fallen mit ihrer Schrift, und Weiß gibt ihr keinen Platz zum Verstecken. Nutze eine kräftige, fast schwarze Tinte, viel Raum und ein Detail in Farbe. Ein weißer Verlauf fügt gerade genug Dimension hinzu, damit die Seite beleuchtet und fertig wirkt. Minimalistische Hintergründe hat weitere Ideen im selben Geist, und Website-Hero-Hintergründe zeigt, wie ein Porzellan- oder Morgenlicht-Verlauf eine ganze Landingpage tragen kann.

In Gradiently funktionieren helle Marks genauso wie kräftige: Der Mark hält eine ruhige Fläche hinter den Worten, und Automatische Farbe wählt eine dunkle Schriftfarbe aus der eigenen Palette des Marks, sodass ein zartes Weiß nie graue Schrift bekommt, die verschwindet.