Soorten kleurverlopen: lineair, radiaal, conisch en mesh uitgelegd

Er zijn vier belangrijke soorten kleurverlopen: lineair, radiaal, conisch en mesh. Lineaire verlopen veranderen van kleur langs een rechte lijn, radiale verlopen spreiden zich naar buiten uit vanuit een punt, conische verlopen draaien rond een middelpunt zoals een wijzer van een klok, en mesh-verlopen mengen meerdere kleurpunten tegelijk in twee dimensies. Daaromheen staan een paar nuttige varianten: herhalende verlopen, verlopen met vrije vorm en korrel, een textuur die erbovenop ligt en geen eigen soort is.

Hieronder krijgt elke soort een live voorbeeld dat je kunt kopiëren, een notitie over waar die goed in is, en een link naar de volledige gids. Begin je bij nul, dan legt wat een kleurverloop is eerst stops, posities en kleurruimtes uit.

Lineaire kleurverlopen

Een lineair verloop loopt langs een rechte lijn onder een hoek die jij kiest. In CSS is de standaardrichting van boven naar beneden, wijst 0deg omhoog en draaien hoeken met de klok mee, dus 90deg loopt van links naar rechts en 135deg loopt van de hoek linksboven naar rechtsonder. Het is veruit de meest gebruikte soort, omdat het voorspelbaar is, elke rechthoek netjes vult en licht suggereert dat van één kant valt.

Gebruik lineaire verlopen voor achtergronden van pagina’s en posts, knoppen, banners en alles wat voorspelbaar moet herhalen of schalen. De syntaxis en de details staan in lineaire kleurverlopen in CSS, en het kiezen van een richting komt aan bod in hoek van een kleurverloop.

Radiale kleurverlopen

Een radiaal verloop begint in een punt en spreidt zich naar buiten uit als een cirkel of een ellips. Dat punt uit het midden halen is de truc waardoor het op licht lijkt: een gloed van linksboven leest als een lamp, een zon of een hooglicht op een gebogen oppervlak. Radiale verlopen zijn ook de basis van de meeste zachte vignetten en spotlighteffecten.

Gebruik radiale verlopen voor gloed, spotlights, vignetten, bollen en alles wat vanuit een punt belicht moet lijken. Zie radiale kleurverlopen voor groottes zoals closest-side en farthest-corner.

Conische kleurverlopen

Een conisch verloop verandert van kleur terwijl je rond een middelpunt beweegt, in plaats van ervan af. Denk aan de zwaai van een klokwijzer. Dat maakt het de vanzelfsprekende keuze voor kleurenwielen, cirkeldiagrammen, laadringen en hoekige glans zoals geborsteld metaal of de regenboogflits op holografische folie.

Gebruik conische verlopen voor wielen, grafieken, glans en iriserende effecten. De volledige gids is conic gradients, en de folielook staat in holografische kleurverlopen.

Herhalende kleurverlopen

Elk van de drie CSS-soorten heeft een herhalende versie. In plaats van één overgang over de hele vorm uit te rekken, herhaalt die een korte overgang steeds opnieuw. Met harde stops krijg je zo scherpe strepen, ringen en zonnestralen zonder één afbeeldingsbestand.

Mesh-verlopen en verlopen met vrije vorm

Een mesh-verloop plaatst kleur op meerdere punten over een oppervlak en mengt ze allemaal in twee dimensies. Illustrator noemt zijn versie met punten en raster een verloopnet en zijn lossere versie een verloop met vrije vorm. In beide gevallen heeft het resultaat geen enkele richting, en daarom oogt het organisch, zoals licht door water of verf die is uitgelopen. CSS heeft geen mesh-soort, maar je kunt er overtuigend een nabootsen door zachte radiale verlopen over een basiskleur te stapelen.

.mesh {
  background-color: #0b1026;
  background-image:
    radial-gradient(at 18% 22%, #7c3aed 0px, transparent 55%),
    radial-gradient(at 82% 18%, #0ea5e9 0px, transparent 50%),
    radial-gradient(at 70% 85%, #f472b6 0px, transparent 55%),
    radial-gradient(at 25% 80%, #14b8a6 0px, transparent 50%);
}

Gebruik mesh-verlopen voor hero-achtergronden, wallpapers, albumhoezen en merkvlakken die levend moeten aanvoelen. De valkuilen, vooral modder en banding, staan in mesh gradients.

Korrel en textuur: de laag erbovenop

Korrel is geen soort kleurverloop, maar het verandert hoe elke soort leest. Een fijne laag ruis verbergt de strepen die gladde overgangen op schermen kunnen tonen, en laat digitale kleur gedrukt of filmisch aanvoelen. Andere materialen, zoals papier, glas en zijde, doen hetzelfde werk met een andere stem. Zie korrelige kleurverlopen voor hoeveel je toevoegt.

Welke soort kleurverloop je gebruikt

Wil je een afgewerkt veld waarin kleur, licht en korrel al in balans zijn, dan is dat wat een Mark is, en je kunt gratis ontwerpen met elke Mark in de Markt.