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

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

Ein weißer Farbverlauf ist der leiseste Verlauf überhaupt, und der, den die meisten Designer leicht falsch machen. Diese Codes zeigen, wie viel Veränderung genug ist, welche Töne du nutzt und wie du sauber in Weiß ausläufst.

## The short version

- Ein weißer Farbverlauf mischt reines Weiß in ein Off-White, das nur wenige Prozent dunkler ist, warm, kühl oder perlmuttartig getönt.
- Off-Whites mit leichtem Warmton wirken wie Papier; solche mit leichtem Blauton wie Porzellan oder Schnee.
- Ein weißer Farbverlauf braucht genug Spanne, um helle Handybildschirme zu überstehen, auf denen sehr kleine Unterschiede verschwinden.
- Um Inhalt in CSS in einen weißen Hintergrund auszublenden, nutze einen Verlauf von `rgb(255 255 255 / 0)` zu `#ffffff`.
- Weiße Verläufe sind hervorragende Produkthintergründe, weil ein weicher Abfall wie ein beleuchtetes Studio wirkt statt wie ein flacher Ausschnitt.

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.

| Stärke | Von | Nach | Einsatz |
| --- | --- | --- | --- |
| Hauch | `#ffffff` | `#f8f8f8` | Große Web-Abschnitte, langes Lesen |
| Sanft | `#ffffff` | `#efefef` | Karten, Social-Posts, Einladungen |
| Sichtbar | `#ffffff` | `#e2e2e2` | Produkthintergründe, Studio-Hohlkehlen |

Neutrale Werte zur Klarheit. In der Praxis tönst du die Endfarbe leicht warm oder kühl, wie in den Codes unten.

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

- Reines Weiß: #ffffff
- Elfenbein: #fffdf8
- Papier: #f6f4f0
- Leinen: #f1ece3
- Porzellan: #f1f4f7
- Frost: #eaf2f8
- Perlflieder: #f3eef8
- Perlmint: #eef6f6

Off-Whites. Auf einer weißen Seite wirken sie fast identisch; nebeneinander sind die warme und die kühle Familie deutlich verschieden.

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

- Papier: `linear-gradient(180deg, #ffffff 0%, #f6f4f0 100%)`
- Elfenbein: `linear-gradient(150deg, #fffdf8 0%, #f8f1e4 100%)`
- Porzellan: `linear-gradient(160deg, #ffffff 0%, #f1f4f7 60%, #e6ebf0 100%)`
- Frost: `linear-gradient(180deg, #f8fbfd 0%, #eaf2f8 100%)`
- Morgenlicht: `radial-gradient(ellipse at 20% 0%, #ffffff 0%, #fbf8f2 45%, #f1ece3 100%)`
- Perle: `linear-gradient(135deg, #fdfcfb 0%, #f3eef8 35%, #eef6f6 65%, #fbf7f0 100%)`

Sechs weiße Verläufe. Auf einem hellen Bildschirm wirken sie wie Oberflächen statt wie Farben, und genau das ist der Punkt.

Willst du etwas mehr Farbe bei gleichem luftigem Gefühl, sind [Pastell-Farbverläufe](https://gradiently.design/de/guide/pastel-gradients) der nächste Schritt. Für das andere Ende der Neutralskala sieh dir die Codes für den [grauen Farbverlauf](https://gradiently.design/de/guide/grey-gradient) 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.

Studio-Hohlkehle: `radial-gradient(ellipse at 50% 35%, #ffffff 0%, #f3f3f3 55%, #e2e2e2 100%)`

Am hellsten knapp über der Mitte, wo das Produkt sitzt, und zu den Ecken hin in ein helles Grau abfallend. Nutze es in 2048×2048 für Shopify-Produktbilder.

[Hintergründe für Produktfotos](https://gradiently.design/de/guide/product-photo-backgrounds) 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.

```css
/* 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;
}
```

Ein Ausblenden, das knapp vor dem unteren Rand in vollem Weiß endet, sodass die letzte Textzeile sauber verschwindet. Passe die Endfarbe an deinen Seitenhintergrund an.

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](https://gradiently.design/de/guide/css-gradient-transparent) geht tiefer auf Ausblendungen und Overlays ein.

## Sauberes Weiß, nicht ausgewaschen

### Ausgewaschen

- Endet in einem neutralen Mittelgrau
- Veränderungen so klein, dass sie auf dem Handy verschwinden
- Hellgraue Schrift auf einem Off-White-Verlauf
- Warme und kühle Off-Whites gemischt
- Ausblenden zu Weiß auf einer cremefarbenen Seite

### Sauber

- Endet in einem leicht getönten Off-White
- Eine sanfte, aber sichtbare Veränderung, auf dem Handy geprüft
- Fast schwarze oder tiefmarineblaue Schrift
- Eine Tonfamilie durchgehend
- Ausblenden zur exakten Hintergrundfarbe der Seite

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](https://gradiently.design/de/guide/gradient-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](https://gradiently.design/de/guide/minimalist-backgrounds) hat weitere Ideen im selben Geist, und [Website-Hero-Hintergründe](https://gradiently.design/de/guide/website-hero-background) zeigt, wie ein Porzellan- oder Morgenlicht-Verlauf eine ganze Landingpage tragen kann.

Eine Hochzeitseinladung im Hochformat mit sanftem elfenbeinweißem Hintergrund und den Worten Ihr seid eingeladen in dunkler Schrift

Eine Einladung im Format 5×7 Zoll auf einem sanften Elfenbein-Mark. Dunkle Tinte, großzügige Ränder und sonst nichts.

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.

## FAQ

### Was ist ein guter Code für einen weißen Farbverlauf?

Für einen weichen Papier-Look probiere `linear-gradient(180deg, #ffffff 0%, #f6f4f0 100%)`. Für einen kühlen Porzellan-Look ende stattdessen auf #e6ebf0.

### Wie mache ich einen Verlauf von Weiß zu Transparent in CSS?

Nutze `linear-gradient(180deg, rgb(255 255 255 / 0), #ffffff)`. Ändere die Endfarbe auf deinen Seitenhintergrund, wenn er nicht reines Weiß ist.

### Warum ist mein weißer Farbverlauf unsichtbar?

Die Endfarbe liegt zu nah an Weiß. Dunkle sie auf etwa #efefef ab, leicht warm oder kühl getönt, und prüfe sie auf einem Handy bei voller Helligkeit.

### Welche Textfarbe funktioniert auf einem weißen Farbverlauf?

Fast Schwarz, Anthrazit oder tiefes Marineblau. Vermeide hellgraue Schrift, die im dunkleren Ende des Verlaufs verschwindet.