De korte versie
- Schilders mengden kleur lang voor er schermen waren, met zachte tonale overgangen en wazige blauwe verten om diepte en licht te suggereren.
- Vroege computerschermen konden te weinig kleuren tonen voor vloeiende overgangen, dus kleurverlopen verschenen als zichtbare banden of geditherde patronen.
- Apples Aqua-interface, gepresenteerd in 2000, maakte glanzende kleurverlopen tot de bepalende look van het decennium dat volgde.
- Flat design duwde kleurverlopen begin jaren 2010 opzij, het duidelijkst met Windows 8 in 2012 en iOS 7 in 2013.
- Kleurverlopen kwamen halverwege de jaren 2010 terug, met het Instagram-icoon uit 2016 als bekendste voorbeeld, en groeiden sindsdien uit tot mesh, korrel en shaders.
Op deze pagina
De geschiedenis van kleurverlopen in ontwerp is het verhaal van techniek die de schilderkunst inhaalt. Kunstenaars mengden eeuwenlang kleur; de drukkerij leerde het na te bootsen met puntjes en gesplitste inkt; vroege schermen konden het nauwelijks tonen; de glanzende interfaces van de jaren 2000 gebruikten het te veel; flat design haalde het weg; en halverwege de jaren 2010 kwam het terug om nooit echt meer te verdwijnen. De kleurverlopen van elk tijdperk zien eruit zoals ze eruitzien door het gereedschap van die tijd.
Dit is een korte, praktische geschiedenis, met de look van elk tijdperk als kleurverloop dat je kunt kopiëren. Voor de basis, zie wat een kleurverloop is en de soorten kleurverlopen.
| Wanneer | Wat er gebeurde | De kleurverlooplook |
|---|---|---|
| Renaissance | Sfumato en luchtperspectief in de schilderkunst | Zachte tonale overgangen, wazige blauwe verte |
| 1704 | Newtons Opticks zet het spectrum in een cirkel | Het eerste kleurenwiel |
| Eind 19e eeuw | Rasterdruk | Toon opgebouwd uit puntjes |
| Begin jaren 90 | Schermen met 256 kleuren | Banding en dithering |
| 2000 tot 2007 | Aqua, Luna van Windows XP, Web 2.0, Aero van Vista | Glans, gel en glas |
| 2012 tot 2014 | Windows 8, iOS 7, Material Design | Vlakke kleur, zachte overgangen |
| 2016 | Het kleurverloopicoon van Instagram | Felle overgangen keren terug |
| Eind jaren 2010 en later | Mesh, conic, korrel, shaders | Zachte lichtvelden en beweging |
Kleurverlopen vóór schermen: schilderkunst en druk
Schilders mengden kleur lang voordat iemand het een kleurverloop noemde. Renaissancekunstenaars gebruikten sfumato, zachte overgangen van toon zonder harde contouren, een techniek die vooral met Leonardo da Vinci wordt verbonden. Landschapsschilders gebruikten luchtperspectief: verre heuvels vervagen in een bleke, blauwige nevel en de lucht wordt lichter naar de horizon toe, het oudste kleurverloop dat de meesten van ons kennen.
linear-gradient(180deg, #4f74a3 0%, #8fadc9 50%, #e9dcc0 100%)De wetenschap bracht orde in kleurovergangen. Isaac Newtons experimenten met een prisma spreidden wit licht uit tot een doorlopend spectrum, en zijn Opticks (1704) zette die kleuren in een cirkel, de voorouder van elk kleurenwiel.
De drukkerij moest doorlopende toon nabootsen. Rasters, ontwikkeld eind negentiende eeuw, maakten van tinten puntjes van verschillende grootte. Drukkers gebruikten ook de split fountain: twee of meer inkten naast elkaar op één pers, die op de rollen in elkaar overlopen, een techniek die in zeefdruk en boekdruk nog steeds geliefd is. De airbrush gaf illustratoren vloeiende overgangen met de hand en bepaalde veel van de posters en albumhoezen uit de jaren 70 en 80.
Vroege schermen: banding, dithering en getegelde afbeeldingen
Vroege computerschermen konden maar een beperkt aantal kleuren tegelijk tonen, en de paletten van 256 kleuren die begin jaren 90 gangbaar waren, konden geen vloeiende overgang vasthouden. Kleurverlopen vielen uiteen in zichtbare strepen, banding genoemd, of werden geditherd tot patronen van puntjes die het oog tot een overgang middelde. Dezelfde strepen duiken nog steeds op als een kleurverloop lang en subtiel is; zie banding in kleurverlopen.
Het vroege web had helemaal geen kleurverloopfunctie. Ontwerpers maakten een afbeelding van één pixel breed en lieten de browser die over de pagina herhalen. SVG, een W3C-aanbeveling uit 2001, had wel lineaire en radiale kleurverlopen, maar CSS-gradients kwamen later: WebKit introduceerde eind jaren 2000 een syntax met prefix, de standaardversie werd vastgelegd in CSS Images Level 3, en begin jaren 2010 kon elke grote browser een kleurverloop tekenen zonder afbeelding.
/* Early 2000s: a 1px-wide image, repeated across */
.header { background: #2b7ae0 url(header-bg.png) repeat-x; }
/* 2010s: the browser draws the gradient */
.header { background: linear-gradient(180deg, #6fb4f5, #2b7ae0); }
/* Now: the same blend, interpolated in OKLCH */
.header { background: linear-gradient(180deg in oklch, #6fb4f5, #2b7ae0); }De glanzende jaren 2000: Aqua, Luna en Web 2.0
Apple presenteerde in 2000 de Aqua-interface voor Mac OS X: doorschijnende, glanzende knoppen die eruitzagen als druppels gekleurde gel, met een felle glimlichtstreep bovenaan. Windows XP volgde in 2001 met het Luna-thema, blauwe titelbalken met kleurverloop en een groene Start-knop. Halverwege het decennium waren glanzende knoppen, spiegelende logo’s en zachte schaduwen zo gewoon op websites dat de look synoniem werd met Web 2.0.
Het Aero-glas van Windows Vista ging in 2007 nog verder in doorschijnendheid. Het probleem was herhaling: toen elke knop, badge en elk logo dezelfde glimlichtstreep droeg, stond glans niet meer voor kwaliteit maar voor een sjabloon. De gids over de Y2K-esthetiek behandelt de bredere look van die jaren.
De omslag naar flat design: Metro en iOS 7
De Metro-ontwerptaal van Microsoft, eerst op Windows Phone en daarna in heel Windows 8 in 2012, gebruikte effen gekleurde tegels, eenvoudige letters en geen enkele glans. Apples iOS 7 liet in 2013 het gestikte leer, vilt en de texturen van eerdere versies vallen voor een vlak, licht ontwerp. Googles Material Design, geïntroduceerd in 2014, hield kleur vlak maar gebruikte schaduw om lagen te tonen.
Glanzende jaren 2000
- Een harde glimlichtstreep halverwege
- Reflecties en afgeschuinde randen
- Kleurverlopen op elk bedieningselement, als versiering
- Nabootsingen van echte materialen
Vlakke jaren 2010
- Effen kleur of een zachte overgang in twee tinten
- Geen afgeschuinde randen, minimale schaduw
- Kleur om te ordenen, niet om te versieren
- Letters en witruimte doen het werk
Kleurverlopen verdwenen niet; ze veranderden van karakter. Veel nieuwe app-iconen van iOS 7 gebruikten felle, zachte kleurverlopen van boven naar beneden in plaats van glans, een voorbode van wat komen ging.
Het kleurverloop keert terug: Instagram en de jaren 2010
In 2016 verving Instagram zijn camera-icoon door een eenvoudige omtrek op een kleurverloop van warm naar violet, een van de meest zichtbare merkkleurverlopen ooit. Rond dezelfde tijd begonnen apps en merken vlakke lay-outs te combineren met gedurfde, felle kleurverlopen, vaak twee kleuren die onder een hoek in elkaar overlopen. Flat design had de versiering opgeruimd; kleurverlopen kwamen terug als kleur en sfeer in plaats van nepglans.
Dat succes had een prijs. Generators en ontwerptools leverden dezelfde paren, en tegen het eind van het decennium leken veel feeds op elkaar, een probleem dat aan bod komt in waarom elke feed er hetzelfde uitziet.
Kleurverlopen nu: mesh, korrel, shaders en beweging
Het nieuwste hoofdstuk draait om rijkdom en controle. Mesh-kleurverlopen, met meerdere kleurpunten die in verschillende richtingen trekken, verhuisden van gespecialiseerde vectortools naar alledaagse ontwerpapps. conic-gradient(), gedefinieerd in CSS Images Level 4, kwam vanaf 2018 in browsers. WebGL-shaders laten websites kleurverlopen tonen die in realtime bewegen en reageren, korrel keerde terug om digitale kleur fysiek te laten voelen, en in 2025 introduceerde Apple Liquid Glass, een doorschijnend materiaal op al zijn platforms.
radial-gradient(ellipse at 30% 25%, #ffd6a5 0%, #f28482 30%, #6d3fa0 65%, #1a1033 100%)Het nieuwste idee is dat een kleurverloop een identiteit met een eigenaar kan zijn, geen stijl die iedereen kan overnemen. De Marks van Gradiently zijn levende kleurverlopen: kleuren, materialen, licht, korrel en beweging als één recept, elk met een openbare code en precies één eigenaar tegelijk. Voor waar het hierna heen gaat, zie kleurverlooptrends 2026.
GR·BBGB·1K
Lilac Pulse
Bekijk deze MarkVragen die mensen stellen
Wanneer werden CSS-gradients geïntroduceerd?
WebKit introduceerde eind jaren 2000 een kleurverloopsyntax met prefix, en de standaard linear-gradient() en radial-gradient() werden vastgelegd in CSS Images Level 3. Begin jaren 2010 ondersteunde elke grote browser ze zonder afbeelding.
Waarom raakten kleurverlopen uit de mode?
Eind jaren 2000 zaten glanzende kleurverlopen op bijna elke knop en elk logo, dus ze voelden niet meer bijzonder. Flat design, aangevoerd door Windows 8 in 2012 en iOS 7 in 2013, verving ze door effen kleur en eenvoudige letters.
Wanneer kwamen kleurverlopen weer in de mode?
Halverwege de jaren 2010. Het kleurverloopicoon van Instagram uit 2016 is het bekendste voorbeeld, en felle tweekleurige overgangen verspreidden zich kort daarna over apps, websites en merken.
Wat was Apples Aqua-interface?
Aqua was de look die Apple in 2000 presenteerde voor Mac OS X, met glanzende, gelachtige knoppen en doorschijnende oppervlakken. Het zette de glanzende kleurverloopstijl van dat decennium neer.
Wat kwam er na flat design?
Vlakke lay-outs met rijke kleur: eerst felle kleurverlopen, daarna mesh-kleurverlopen, korrel, beweging met shaders en recenter doorschijnende materialen zoals Apples Liquid Glass.
Geschreven door Gradiently
Het team achter Gradiently, een ontwerptool rond Marks: levende kleurverlopen die alles wat je ontwerpt op jou laten lijken.
Bekijk ons profiel
