Gradient trends 2026: zes richtingen die het gebruiken waard zijn

De gradient trends 2026 die ontwerpers echt gebruiken gaan minder over nieuwe kleuren en meer over afwerking. Kleurverlopen zijn nu eerder korrelig dan glanzend, eerder donker dan snoepfel, trager als ze bewegen, en gebouwd om bij één merk te horen in plaats van geleend uit een preset. Deze gids loopt zes richtingen door die we zien op lanceringspagina’s, in feeds en in productfilms, met bij elke richting codes die je kunt kopiëren.

Dit zijn waarnemingen over waar ontwerp naartoe gaat, geen voorspelling op basis van data. Zie ze als opties om tegen je eigen merk te testen. Ben je nieuw met de basis, begin dan bij de soorten kleurverlopen.

Korrelige, tastbare kleurverlopen

Het gladde, plastic verloop dat kleurverlopen jarenlang bepaalde, leest nu als een standaardinstelling. De huidige look voegt een fijne laag ruis toe, zodat kleur gedrukt, gefilmd of geschilderd aanvoelt in plaats van gerenderd. Korrel heeft ook een praktische taak: het breekt de zichtbare stappen, banding genoemd, die in lange en subtiele verlopen verschijnen. Zie korrelige kleurverlopen voor de volledige techniek en banding in kleurverlopen voor waarom de stappen ontstaan.

.grain {
  position: relative;
  background: linear-gradient(160deg, #2a1b3d 0%, #a4508b 55%, #f5b971 100%);
}
.grain::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.18;
  mix-blend-mode: overlay;
  pointer-events: none;
}

Houd korrel fijn en gelijkmatig. Grove ruis met veel contrast oogt als een filter, korrel die je pas van dichtbij ziet oogt als materiaal. Heel fijne korrel kan ook worden gladgestreken door de compressie van platforms, dus bekijk een geëxporteerd bestand op je telefoon voordat je publiceert. Meer afwerkingen staan in kleurverloop met textuur.

Mesh- en aurora-kleurverlopen, maar rustiger

Mesh- en aurora-kleurverlopen, de zachte kleurvelden die op licht door mist lijken, zijn al een paar jaar populair. Wat nu actueel aanvoelt is een ingetogener versie: twee of drie lichtbronnen in plaats van zes, één dominante kleur en grote stille vlakken waar woorden kunnen staan. De drukke mesh met veel vlekken oogt nu al als het moment waar hij vandaan kwam. Zie mesh-kleurverlopen en aurora-kleurverlopen.

De test is eenvoudig: knijp je ogen samen en kijk naar het ontwerp. Zie je nog waar de kop komt, dan is het veld rustig genoeg. Concurreert de kleur met de woorden, haal dan een lichtbron weg voordat je aan de letters komt.

Kleurverlopen met donkere luxe

Premium merken zijn opgeschoven naar bijna zwarte ondergronden die door één warme bron worden verlicht, als een product op een donker podium. De kleur leeft vooral in de schaduwen: aubergine, ossenbloedrood, brons, diep petrol, met één klein hooglicht dat al het werk doet. Het past bij avondevenementen, parfum, sterkedrank, sieraden en alles wat op kwaliteit wordt verkocht in plaats van op plezier.

Twee waarschuwingen. Zuiver zwart #000000 naast een gloed geeft vaak banding en oogt vlak op telefoons, dus begin bij een heel donkere kleur met een beetje tint erin. En test kleine tekst: donkerder goud op aubergine oogt rijk, maar kan onder een leesbaar contrast zakken. De gidsen over donkere achtergronden met kleurverloop en kleurcontrast behandelen beide.

Felle kleurverlopen gemengd in OKLCH

Felle kleurverlopen zijn terug met een technische upgrade. Browsers kunnen kleuren nu mengen in OKLCH, een kleurruimte die is gebouwd rond hoe mensen helderheid en tint waarnemen. Een kleurverloop van blauw naar oranje dat op de traditionele manier is gemengd, loopt in het midden door een dof grijsmauve. Gemengd in OKLCH reist het rond de kleurencirkel en blijft het de hele weg verzadigd. De details staan in vloeiendere CSS-kleurverlopen met OKLCH.

.vivid {
  /* Fallback for older browsers */
  background: linear-gradient(90deg, #1e5eff, #ff8a00);
  /* Blend in OKLCH where supported */
  background: linear-gradient(90deg in oklch, #1e5eff, #ff8a00);
}

Dezelfde techniek redt elk paar verre tinten. Blijf je liever in sRGB, voeg dan met de hand een heldere stop in het midden toe, zoals te zien in waarom sommige kleurverlopen grijs worden in het midden. MDN documenteert de syntaxis onder color interpolation methods.

Trage kleurverlopen die in een loop bewegen

Beweging is een gewoon onderdeel van een identiteit met een kleurverloop geworden, geen speciaal effect. De versies die actueel aanvoelen bewegen traag, drijven in tien tot twintig seconden en lopen rond zonder zichtbare sprong, zodat ze achter een Story, een Reel of een hero op een website kunnen staan zonder aandacht op te eisen. Snelle, pulserende kleur leest nu als een advertentie. Zie geanimeerde achtergronden met kleurverloop en een naadloos loopende video maken.

Story en Reel 9:16

1080 × 1920

Instagram-post 4:5

1080 × 1350

X-post 16:9

1600 × 900

Hero op een website

1920 × 1080

Twee regels houden loops prettig. Beweeg de kleur, niet het hele beeld: licht dat traag over een stil veld drijft voelt rustig, terwijl zoomen en draaien als een screensaver aanvoelt. En respecteer mensen die beweging uitzetten. Houd op het web rekening met prefers-reduced-motion, uitgelegd in verminderde beweging.

Eigen kleurverlopen in plaats van presets

De stilste richting gaat misschien het langst mee. Generators en ontwerptools maakten dezelfde paar honderd kleurverlopen voor iedereen beschikbaar, en feeds vulden zich met identieke verlopen van violet naar roze. Merken die herkend willen worden, stappen over van een preset kiezen naar een identiteit met een eigen kleurverloop: een vast recept van kleuren, richting, textuur en beweging, dat overal op dezelfde manier wordt gebruikt. Branding met kleurverlopen legt uit hoe je er een bouwt, en waarom elke feed er hetzelfde uitziet legt het probleem uit dat het oplost.

Gradiently neemt dit letterlijk. Elke Mark is een levende identiteit met een kleurverloop, een openbare code en precies één eigenaar tegelijk, die voor publicatie met elke andere Mark wordt vergeleken, zodat er niets bestaat dat er te dicht bij ligt. Iedereen kan met elke Mark ontwerpen, en als je er een claimt, is hij van jou.

GR·D6ED·A8

Beryl Anthem

Bekijk deze Mark

Zo kies je een gradient trend voor je merk

Een trend helpt als hij je bestaande identiteit actueel laat aanvoelen, en schaadt als hij die vervangt. Kies de richting die past bij wat je al bent: korrel voor ambachtelijk, donkere luxe voor premium, felle OKLCH voor energiek, rustige aurora voor welzijn. Voor het bredere beeld voorbij kleurverlopen, zie trends in grafisch ontwerp voor 2026.