CSS Mesh Verloop
Maak prachtige mesh-verloopachtergronden met 4 kleurpunten en instelbare vervaging. Kopieer de pure CSS-uitvoer en gebruik het in elk project.
① Kies 4 kleuren voor elke hoek ② Pas de vervagingsintensiteit aan ③ Kopieer de CSS-uitvoer
Kleur linksboven
#C9B89A
Kleur rechtsboven
#7A5C38
Kleur linksonder
#1A3A5C
Kleur rechtsonder
#2A5A3A
Vervagingsintensiteit (px): 160px
Hoe het werkt
Het mesh-verloop gebruikt vier radial-gradient-lagen, elk verankerd in een hoek. De verlopen mengen via CSS-transparantie, en de vervagingsintensiteit bepaalt hoe ver elk verloop zich verspreidt.
Vervagingsintensiteit
Hogere vervagingswaarden laten de verlopen zich verder verspreiden en vloeiender mengen. Lagere waarden houden elke kleur meer geconcentreerd in zijn hoek.
CSS-uitvoer
De gegenereerde CSS gebruikt background-color als basis en stapelt meerdere radial-gradient-definities op background-image. Geen JavaScript of canvas nodig.
background-color: #c9b89a;
background-image:
radial-gradient(ellipse at 0% 0%, #c9b89a 0%, transparent 160px),
radial-gradient(ellipse at 100% 0%, #7a5c38 0%, transparent 160px),
radial-gradient(ellipse at 0% 100%, #1a3a5c 0%, transparent 160px),
radial-gradient(ellipse at 100% 100%, #2a5a3a 0%, transparent 160px);
Wat is een mesh-verloop?
Een mesh-verloop is een vloeiende meerpuntskleumenging die vloeiende, aurora-achtige achtergronden produceert. In tegenstelling tot een standaard lineair of radiaal verloop plaatst een mesh-verloop meerdere kleurpunten over het oppervlak. De CSS-implementatie gebruikt overlappende radial-gradient-lagen verankerd in elke hoek — een lichtgewicht, beeldloze techniek.
Veelgestelde vragen
Een mesh-verloop is een type verloop dat meerdere kleuren op verschillende punten van een oppervlak mengt. Het resultaat is een vloeiend, organisch kleurveld dat lijkt op aurora's of zachte lichteffecten.
Het CSS mesh-verloop gebruikt vier radial-gradient-lagen — één verankerd in elke hoek — die zich naar buiten verspreiden en overgaan in transparantie. Deze lagen zijn gestapeld op background-image.
Een lineair verloop gaat over van kleuren langs een enkele as. Een mesh-verloop plaatst kleurpunten op willekeurige posities, wat een vloeiende multidirectionele kleurmenging oplevert.
De vervagingsparameter regelt de verspreidingsradius van elke radial-gradient-laag. Een hogere waarde laat elke kleur zich verder verspreiden voordat deze overgaat in transparant.
Alleen-CSS mesh-verlopen zijn beperkt tot hoekankerpunten. Echte mesh-verlopen (zoals in Figma of Illustrator) kunnen kleurpunten overal op het oppervlak hebben.
Kopieer de CSS en pas deze toe op elk HTML-element, zoals een hero-sectie, body of kaartcontainer. De background-color zorgt voor volledige dekking als fallback.
De radial-gradient-functie wordt ondersteund in alle moderne browsers (Chrome, Firefox, Safari, Edge) sinds 2013.