# Een korte geschiedenis van kleurverlopen in ontwerp

[Canonical HTML page](https://gradiently.design/nl/guide/history-of-gradients)

Kleurovergangen zijn ouder dan schermen, raakten bijna van de ene op de andere dag uit de mode en kwamen sterker terug. Zo reisde het kleurverloop van geschilderde luchten naar levende achtergronden.

## The short version

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

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](https://gradiently.design/nl/guide/what-is-a-gradient) en de [soorten kleurverlopen](https://gradiently.design/nl/guide/types-of-gradients).

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

Het verhaal van het kleurverloop in één oogopslag.

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

Geschilderde lucht, zenit tot horizon: `linear-gradient(180deg, #4f74a3 0%, #8fadc9 50%, #e9dcc0 100%)`

Diepblauw boven je hoofd, verblekend tot een warme nevel aan de horizon: de overgang die landschapsschilders gebruikten om ruimte diep te laten voelen.

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](https://gradiently.design/nl/guide/color-wheel).

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.

- Split fountain, rood naar blauw: `linear-gradient(90deg, #d7263d 0%, #7a4f8f 50%, #1b98e0 100%)`
- Geairbrushte zonsondergang: `linear-gradient(180deg, #1b1340 0%, #7b2d6e 45%, #f06a3f 75%, #ffd27a 100%)`

Twee looks van vóór het digitale tijdperk. Een split fountain mengt echte inkt, dus het midden is donkerder paars; geairbrushte luchten stapelden warme banden onder een donkere bovenkant.

## 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](https://gradiently.design/nl/guide/gradient-banding).

- Overgang in banden, vijf kleuren: `linear-gradient(90deg, #14145c 0% 20%, #26268a 20% 40%, #3a3ab4 40% 60%, #5454d6 60% 80%, #7676f0 80% 100%)`
- Dezelfde overgang, vloeiend: `linear-gradient(90deg, #14145c 0%, #7676f0 100%)`

Wat een beperkt palet met een overgang doet. Met maar vijf kleuren wordt een vloeiend kleurverloop een trap.

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](https://www.w3.org/TR/css-images-3/), en begin jaren 2010 kon elke grote browser een kleurverloop tekenen zonder afbeelding.

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

Drie tijdperken van dezelfde header. Vandaag doet één regel alles, met [vloeiendere overgangen in OKLCH](https://gradiently.design/nl/guide/css-gradient-oklch) als je dat wilt.

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

- Gelknop in Aqua-stijl: `linear-gradient(180deg, #d9efff 0%, #8cc8f7 48%, #3d8ee6 52%, #74c1ff 100%)`
- Titelbalk in Luna-stijl: `linear-gradient(180deg, #3a8cf4 0%, #0a5fd8 12%, #0453d0 80%, #0a3fa8 100%)`
- Glanzend Web 2.0-groen: `linear-gradient(180deg, #b6e67a 0%, #7cc242 50%, #5ea82a 51%, #8fd14f 100%)`
- Glas in Aero-stijl: `linear-gradient(180deg, #e8f3fb 0%, #bcd8ee 50%, #9cc3e3 51%, #d2e8f7 100%)`

De kenmerkende truc van die tijd: een plotselinge toonwissel halverwege, die het oog leest als een reflectie op een glanzend oppervlak.

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](https://gradiently.design/nl/guide/y2k-aesthetic) 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.

- Fel groen in iOS 7-stijl: `linear-gradient(180deg, #87fc70 0%, #0bd318 100%)`
- Geel via roze naar violet: `linear-gradient(45deg, #feda75 0%, #fa7e1e 25%, #d62976 50%, #962fbf 75%, #4f5bd5 100%)`
- Violet naar roze, presettijdperk: `linear-gradient(135deg, #7f5af0 0%, #ff6ac1 100%)`
- Blauw naar cyaan, presettijdperk: `linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)`

De look van de terugkeer: vlakke lay-outs, felle overgangen. Tweekleurige paren zoals de laatste twee werden zo gewoon dat ze nu als presets lezen.

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](https://gradiently.design/nl/guide/why-every-feed-looks-the-same).

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

Een zacht lichtveld: `radial-gradient(ellipse at 30% 25%, #ffd6a5 0%, #f28482 30%, #6d3fa0 65%, #1a1033 100%)`

Licht in plaats van strepen of glans: perzik dat oplicht in koraal, violet en nacht. Zie [mesh-kleurverlopen](https://gradiently.design/nl/guide/mesh-gradients) en [shader-kleurverlopen](https://gradiently.design/nl/guide/shader-gradients) voor hoe de velden van nu worden gemaakt.

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](https://gradiently.design/nl/guide/gradient-trends-2026).

Een Mark: een kleurverloopidentiteit met een code, een maker en één eigenaar.

## FAQ

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