Wit kleurverloop: subtiele lichtcodes voor strakke ontwerpen

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.

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.

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.

Wil je iets meer kleur met dezelfde luchtige sfeer, dan zijn pastelkleurverlopen de volgende stap. Voor het andere uiteinde van de neutrale schaal zie de codes voor een grijs kleurverloop.

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.

Achtergronden voor productfoto’s 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.

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

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 gaat dieper in op fades en overlays.

Schoon wit, niet flets

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.

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 heeft meer ideeën in dezelfde geest en achtergronden voor website-heroes laat zien hoe een kleurverloop in porselein of ochtendlicht een hele landingspagina kan dragen.

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.