# Wit kleurverloop: subtiele lichtcodes voor strakke ontwerpen

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

Een wit kleurverloop is het rustigste kleurverloop dat er is, en het verloop dat de meeste ontwerpers net niet goed doen. Deze codes laten zien hoeveel verandering genoeg is, welke tinten je gebruikt en hoe je netjes naar wit faadt.

## The short version

- Een wit kleurverloop mengt zuiver wit met een gebroken wit dat slechts enkele procenten donkerder is, warm, koel of parelachtig getint.
- Gebroken witten met een lichte warme tint voelen als papier; die met een lichte blauwe tint als porselein of sneeuw.
- Een wit kleurverloop heeft genoeg bereik nodig om heldere telefoonschermen te doorstaan, waar heel kleine verschillen verdwijnen.
- Om inhoud in CSS naar een witte achtergrond te laten vervagen, gebruik je een verloop van `rgb(255 255 255 / 0)` naar `#ffffff`.
- Witte kleurverlopen zijn uitstekende productachtergronden, omdat een zachte afval leest als een belichte studio in plaats van een vlakke uitsnede.

Een **wit kleurverloop** gaat van zuiver wit naar een gebroken wit dat maar iets donkerder is, meestal met een milde warme, koele of parelachtige tint. De verandering is bewust klein: het moet voelen als licht dat over een oppervlak valt, niet als kleur. Dat maakt witte kleurverlopen ideaal voor strakke websites, productfoto’s, uitnodigingen en minimale socialemediaposts. Hieronder lees je hoe sterk je er een maakt, vind je een palet van gebroken witten en kopieerbare codes en zie je hoe je in CSS op de juiste manier naar wit vervaagt.

## Hoeveel verandering een wit kleurverloop nodig heeft

Te weinig en niemand ziet het, zeker op een telefoon op volle helderheid. Te veel en het wit wordt grijs en vuil. De tabel geeft drie sterktes, gemeten aan hoever de eindkleur onder zuiver wit zit. De meeste ontwerpen willen de middelste.

| Sterkte | Van | Naar | Gebruik voor |
| --- | --- | --- | --- |
| Fluistering | `#ffffff` | `#f8f8f8` | Grote websitesecties, lang lezen |
| Zacht | `#ffffff` | `#efefef` | Kaarten, socialemediaposts, uitnodigingen |
| Zichtbaar | `#ffffff` | `#e2e2e2` | Productachtergronden, studio-achtergronden |

Neutrale waarden voor de duidelijkheid. Tint de eindkleur in de praktijk licht warm of koel, zoals in de codes hieronder.

## Gebroken witten om op voort te bouwen

Zuiver neutrale grijzen aan het eind van een wit kleurverloop zien er wat levenloos uit. Een spoortje tint maakt het verschil: warme gebroken witten lezen als papier, linnen en ivoor; koele als porselein, rijp en sneeuw. Kies de tint die bij de rest van je palet past en houd hem consistent over een set ontwerpen.

- Zuiver wit: #ffffff
- Ivoor: #fffdf8
- Papier: #f6f4f0
- Linnen: #f1ece3
- Porselein: #f1f4f7
- Rijp: #eaf2f8
- Parellila: #f3eef8
- Parelmunt: #eef6f6

Gebroken witten. Op een witte pagina lijken ze bijna identiek; naast elkaar zijn de warme en koele families duidelijk verschillend.

## Codes voor een wit kleurverloop

Elk van deze begint op of bij zuiver wit. Papier en ivoor zijn warm en redactioneel. Porselein en rijp zijn koel en technisch. Ochtendlicht voegt een zachte gloed vanuit één hoek toe en parel mengt meerdere nauwelijks aanwezige tinten tot een delicate iriserende gloed die nooit in een regenboog omslaat.

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

Zes witte kleurverlopen. Op een helder scherm lezen ze als oppervlakken in plaats van kleuren, en dat is precies de bedoeling.

Wil je iets meer kleur met dezelfde luchtige sfeer, dan zijn [pastelkleurverlopen](https://gradiently.design/nl/guide/pastel-gradients) de volgende stap. Voor het andere uiteinde van de neutrale schaal zie de codes voor een [grijs kleurverloop](https://gradiently.design/nl/guide/grey-gradient).

## Een wit kleurverloop achter producten

Fotografen belichten een witte achtergrond zo dat die zacht naar de randen afvalt, waardoor het object zonder schaduwlijn van de achtergrond loskomt. Een radiaal wit kleurverloop doet hetzelfde op een scherm. Het is vooral nuttig als je een product uit zijn foto knipt: een vlak wit erachter ziet er opgeplakt uit, een zachte uitloop als een studio.

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

Het helderst net boven het midden, waar het product staat, en afvallend naar lichtgrijs in de hoeken. Gebruik het op 2048×2048 voor Shopify-productafbeeldingen.

[Achtergronden voor productfoto’s](https://gradiently.design/nl/guide/product-photo-backgrounds) behandelt schaduwen, gekleurde achtergronden en wanneer wit de verkeerde keuze is.

## Vervagen naar wit met een CSS-verloop

Het meest voorkomende witte kleurverloop op het web is helemaal geen achtergrond: het is een fade die het eind van een afgekapt artikel, de onderkant van een scrollende lijst of de rand van een foto verzacht. Schrijf het transparante eind als wit met nul dekking. Moderne browsers mengen `transparent` correct, maar `rgb(255 255 255 / 0)` zegt precies wat je bedoelt en voorkomt de grijzige band die sommige oudere engines tekenden.

```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;
}
```

Een fade die vlak voor de onderrand in massief wit eindigt, zodat de laatste tekstregel netjes verdwijnt. Stem de eindkleur af op je paginaachtergrond.

Is je paginaachtergrond een gebroken wit in plaats van zuiver wit, vervaag dan naar die kleur, anders eindigt de fade in een zichtbare lichtere strook. [CSS-verloop transparant](https://gradiently.design/nl/guide/css-gradient-transparent) gaat dieper in op fades en overlays.

## Schoon wit, niet flets

### Flets

- Eindigen in een neutraal middengrijs
- Veranderingen die zo klein zijn dat ze op een telefoon verdwijnen
- Lichtgrijze letters op een gebroken wit kleurverloop
- Warme en koele gebroken witten door elkaar
- Vervagen naar wit op een crèmekleurige pagina

### Schoon

- Eindigen in een licht getint gebroken wit
- Een zachte maar zichtbare verandering, gecontroleerd op een telefoon
- Bijna-zwarte of diepmarineblauwe letters
- Eén tintfamilie overal
- Vervagen naar de exacte achtergrondkleur van de pagina

Witte kleurverlopen vertonen ook banding, hoewel minder dan donkere; zie je trappen op een groot beeldscherm, dan lost een heel fijne korrel dat op, zoals uitgelegd in [banding in kleurverlopen](https://gradiently.design/nl/guide/gradient-banding).

## Witte kleurverlopen in minimale ontwerpen

Minimale ontwerpen staan of vallen met hun letters en wit laat ze nergens schuilen. Gebruik sterke, bijna zwarte inkt, veel ruimte en één detail in kleur. Een wit kleurverloop geeft precies genoeg dimensie om de pagina belicht en af te laten voelen. [Minimalistische achtergronden](https://gradiently.design/nl/guide/minimalist-backgrounds) heeft meer ideeën in dezelfde geest en [achtergronden voor website-heroes](https://gradiently.design/nl/guide/website-hero-background) laat zien hoe een kleurverloop in porselein of ochtendlicht een hele landingspagina kan dragen.

Een staande trouwkaart met een zachte ivoorwitte achtergrond en de woorden Je bent uitgenodigd in donkere letters

Een uitnodiging van 5×7 inch op een zachte ivoren Mark. Donkere inkt, royale marges en verder niets.

In Gradiently werken lichte Marks net als gedurfde: de Mark houdt een rustig gebied achter de woorden en Auto-inkt kiest een donkere letterkleur uit het eigen palet van de Mark, zodat een delicaat wit nooit grijze tekst krijgt die verdwijnt.

## FAQ

### Wat is een goede code voor een wit kleurverloop?

Probeer voor een zachte papierlook `linear-gradient(180deg, #ffffff 0%, #f6f4f0 100%)`. Voor een koele porseleinlook eindig je op #e6ebf0.

### Hoe maak ik een verloop van wit naar transparant in CSS?

Gebruik `linear-gradient(180deg, rgb(255 255 255 / 0), #ffffff)`. Pas de eindkleur aan op je paginaachtergrond als die niet zuiver wit is.

### Waarom is mijn witte kleurverloop onzichtbaar?

De eindkleur ligt te dicht bij wit. Maak hem donkerder, rond #efefef, licht warm of koel getint, en controleer hem op een telefoon op volle helderheid.

### Welke tekstkleur werkt op een wit kleurverloop?

Bijna-zwart, antraciet of diep marineblauw. Vermijd lichtgrijze letters, die in het donkerdere uiteinde van het verloop wegvallen.