# CSS mesh gradient: zo bouw je er een uit radiale lagen

[Canonical HTML page](https://gradiently.design/nl/guide/css-mesh-gradient)

Er is geen mesh-gradient() in CSS. Dit is de laagmethode die er overtuigend een nabootst, de blur en korrel die hem afmaken en wanneer een afbeelding of shader beter is.

## The short version

- CSS heeft geen native mesh-gradientfunctie, dus een CSS mesh gradient bouw je door meerdere radiale kleurverlopen over een effen basiskleur te stapelen.
- Elke laag is een vlek kleur op een eigen positie die vervaagt naar transparant, en de overlappingen maken de zachte overgang in meerdere richtingen van een mesh.
- Een blurfilter op een pseudo-element verzacht de vlekken verder en een vage ruislaag verbergt banding.
- Statische gelaagde kleurverlopen zijn goedkoop om te renderen, maar grote blurs en geanimeerde lagen tekenen vaak opnieuw en moeten traag, klein of optioneel blijven.
- Heeft een ontwerp veel kleurpunten, vervormde vormen of vloeiende beweging op volledig scherm nodig, dan is een geëxporteerde afbeelding, video of WebGL-shader meestal het betere gereedschap.

Een **CSS mesh gradient** is een achtergrond waarin kleur in meerdere richtingen tegelijk overloopt, alsof vlekken pigment in elkaar zijn getrokken. CSS heeft geen mesh-functie, en de mesh gradients die ooit voor SVG werden opgesteld zijn nooit in browsers verschenen, dus de webversie is nagebootst: drie tot vijf `radial-gradient()`-lagen gestapeld over een effen kleur, elk vervagend naar `transparent`. Zorgvuldig gedaan komt het dichtbij genoeg dat niemand het verschil ziet, weegt het een paar honderd bytes en blijft het op elk formaat scherp.

Wil je eerst de ontwerptheorie, wat een mesh is en waarom hij organisch voelt, lees dan [mesh gradients](https://gradiently.design/nl/guide/mesh-gradients). Deze gids gaat over er een in code bouwen.

## Hoe de laagmethode werkt

Elke laag is één kleurpunt. De positie is de `at`-waarde, het bereik is de vervagingsafstand en de sterkte is de alfa van de kleur. Omdat het eerste kleurverloop in `background-image` bovenaan wordt geschilderd, doet de volgorde hier minder ertoe dan je zou denken: elke laag is grotendeels transparant, dus ze mengen waar ze overlappen. De `background-color` als basis schijnt door waar geen vlek reikt.

- Vlek 1: violet, linksboven: `radial-gradient(circle at 15% 20%, #7c3aed, #0b1026 55%)`
- Vlek 2: roze, rechtsboven: `radial-gradient(circle at 85% 25%, #ec4899, #0b1026 50%)`
- Vlek 3: cyaan, onderaan: `radial-gradient(ellipse at 60% 90%, #06b6d4, #0b1026 60%)`
- Vlek 4: amberaccent: `radial-gradient(circle at 25% 80%, #f59e0b, #0b1026 45%)`

De vier kleurpunten van één mesh, elk alleen getoond op de marineblauwe basis. Gestapeld lopen ze over in één vlak.

```css
.mesh {
  background-color: #0b1026;
  background-image:
    radial-gradient(circle at 15% 20%, rgb(124 58 237 / 0.85), transparent 55%),
    radial-gradient(circle at 85% 25%, rgb(236 72 153 / 0.75), transparent 50%),
    radial-gradient(ellipse at 60% 90%, rgb(6 182 212 / 0.7), transparent 60%),
    radial-gradient(circle at 25% 80%, rgb(245 158 11 / 0.55), transparent 45%);
}
```

De volledige stapel. Verander één `at`-waarde en de hele compositie balanceert opnieuw.

## Stap voor stap: bouw je eigen CSS mesh gradient

1. **Kies een ondergrond** Kies de effen kleur die tussen de vlekken zichtbaar is. Donkere ondergronden laten vlekken gloeien; lichte laten ze aanvoelen als aquarel. De ondergrond is ook je terugval als de kleurverlopen falen.
2. **Kies drie tot vijf verwante kleuren** Naburige tinten mengen schoon. Tegenpolen, zoals blauw en oranje, ontmoeten elkaar in een grijze veeg. [Modderige kleurverlopen](https://gradiently.design/nl/guide/muddy-gradients) legt uit waarom en hoe je het vermijdt.
3. **Plaats de vlekken uit het midden** Duw punten naar hoeken en randen en laat minstens één deels buiten het vak vallen, zoals `at 110% 0%`. Gecentreerde vlekken lijken op een schietschijf.
4. **Varieer bereik en sterkte** Geef één kleur de grootste vervaging en hoogste alfa zodat hij leidt. Houd het accent klein en zwakker. Gelijke vlekken lijken mechanisch.
5. **Meng in een betere kleurruimte** Voeg waar ondersteund `in oklab` toe aan elke laag, zoals in `radial-gradient(in oklab circle at 15% 20%, ...)`. Overlappingen blijven helderder dan in sRGB.
6. **Werk af met korrel** Grote zachte vervagingen vormen op veel schermen banden. Een vage ruisoverlay lost dat op en voegt een gedrukt gevoel toe; zie hieronder.

## Zachtere overgangen met blur

Radiale vervagingen zijn glad, maar hun vormen zijn duidelijk rond. Een blur verzacht de cirkels tot iets organischers. Zet de lagen op een pseudo-element, vervaag het en maak het groter met een negatieve `inset`, zodat de vervaagde randen niet in de pagina vervagen. `isolation: isolate` houdt de negatieve `z-index` binnen het component.

```css
.mesh {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: #0b1026;
}

.mesh::before {
  content: "";
  position: absolute;
  inset: -15%;
  z-index: -1;
  background-image:
    radial-gradient(circle at 20% 25%, #7c3aed, transparent 40%),
    radial-gradient(circle at 80% 30%, #ec4899, transparent 35%),
    radial-gradient(circle at 55% 85%, #06b6d4, transparent 40%);
  filter: blur(48px);
}
```

Een vervaagde mesh op een pseudo-element. Tekst in `.mesh` blijft scherp omdat alleen het pseudo-element wordt vervaagd.

> **Blur is het dure onderdeel** Een statische blur wordt één keer getekend en is meestal prima. Een vervaagde laag die beweegt of van grootte verandert wordt elk beeld opnieuw getekend, en grote blurstralen op volledig scherm kosten het meest. Zie [CSS-kleurverloopprestaties](https://gradiently.design/nl/guide/css-gradient-performance).

## Korrel toevoegen aan een CSS mesh gradient

Korrel doet twee dingen. Ze breekt de zichtbare trappen op die verschijnen in brede vervagingen met laag contrast, en geeft het oppervlak de tactiele, filmachtige kwaliteit waardoor kleurverlopen doordacht lijken in plaats van standaard. In CSS is de gebruikelijke bron een SVG-filter `feTurbulence` als piepkleine achtergrondafbeelding, met lage dekking bovenop gelegd. De volledige techniek staat in [CSS-ruistextuur](https://gradiently.design/nl/guide/css-noise-texture), en de ontwerpredenering in [korrelige kleurverlopen](https://gradiently.design/nl/guide/grainy-gradients).

### Zonder korrel

- Zichtbare ringen in donkere vlakken op veel schermen
- Oppervlak leest als een vlakke schermkleur
- Ziet eruit als een standaardsjabloon

### Met vage korrel

- Trappen worden gebroken en verdwijnen
- Oppervlak leest als papier, film of drukwerk
- Voelt bewust en af

## Een mesh gradient animeren

Kleurverloopposities zijn op zichzelf niet te animeren, maar geregistreerde aangepaste eigenschappen wel. Declareer elke bewegende coördinaat met `@property`, gebruik hem in het kleurverloop en animeer de eigenschap. Houd de beweging traag en zet haar uit voor mensen die om [verminderde beweging](https://gradiently.design/nl/guide/reduced-motion) vragen.

```css
@property --x1 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 15%;
}

.mesh {
  background-color: #0b1026;
  background-image:
    radial-gradient(circle at var(--x1) 20%, rgb(124 58 237 / 0.85), transparent 55%),
    radial-gradient(ellipse at 60% 90%, rgb(6 182 212 / 0.7), transparent 60%);
  animation: drift 20s ease-in-out infinite alternate;
}

@keyframes drift {
  to { --x1: 55%; }
}

@media (prefers-reduced-motion: reduce) {
  .mesh { animation: none; }
}
```

Eén vlek die over de bovenkant drijft. Voeg een tweede eigenschap toe per coördinaat die je wilt laten bewegen.

Elk beeld van deze animatie tekent de hele achtergrond opnieuw. Op een kleine kaart is dat triviaal; op een hero over het hele scherm is het de moeite van meten waard. De gids over [geanimeerde kleurverlopen](https://gradiently.design/nl/guide/css-animated-gradient) behandelt goedkopere alternatieven, zoals een te grote laag verplaatsen met `transform`.

## Wanneer je een afbeelding of WebGL gebruikt

| Aanpak | Het best voor | Let op |
| --- | --- | --- |
| Gelaagde CSS-kleurverlopen | Statische achtergronden, kaarten, heroes met drie tot vijf kleuren | Rond ogende vlekken, banding zonder korrel |
| CSS met blur | Zachtere, organischer statische vlakken | Kosten van opnieuw tekenen bij animatie of vaak van grootte veranderen |
| Geëxporteerde afbeelding (AVIF of WebP) | Complexe meshes met veel punten of schilderachtige vormen | Bestandsgewicht en een vaste uitsnede per formaat |
| Videoloop | Rijke beweging op een hero | Bestandsgrootte, regels voor autoplay, verminderde beweging |
| WebGL-shader | Volledig scherm, vloeiende, interactieve beweging | Complexiteit van de code, batterijgebruik, terugvallen |

Kies het lichtste gereedschap dat er nog goed uitziet.

Shaders staan in [WebGL-kleurverlopen](https://gradiently.design/nl/guide/shader-gradients). Een middenweg is de achtergrond één keer als levend materiaal te ontwerpen en te exporteren: de Marks van Gradiently zijn meshachtige materialen met kleur, korrel, licht en beweging, en een ontwerp dat ermee is gemaakt exporteert als PNG, JPEG of naadloze videoloop van 5 tot 30 seconden.

Een Mark: kleurvlekken, materiaal en korrel live gerenderd in plaats van benaderd met lagen.

## FAQ

### Kun je een mesh gradient maken met puur CSS?

Niet native, maar drie tot vijf radiale kleurverlopen die naar transparant vervagen over een basiskleur stapelen geeft een overtuigende mesh. Een blur en een ruislaag maken hem af.

### Hoeveel radiale kleurverlopen heeft een CSS mesh nodig?

Drie tot vijf is meestal genoeg. Minder lijkt op een eenvoudige gloed; meer wordt vaak modderig en moeilijker in balans te brengen.

### Waarom ziet mijn CSS mesh gradient er modderig uit?

Tegenovergestelde tinten die in sRGB samenkomen mengen via grijs. Gebruik naburige kleuren, verklein de overlap of voeg `in oklab` toe aan elke laag.

### Is een CSS mesh gradient slecht voor de prestaties?

Een statische is goedkoop. De kosten stijgen bij grote blurfilters en bij animatie, omdat de achtergrond elk beeld opnieuw wordt getekend.

### Ondersteunt SVG mesh gradients?

Mesh gradients werden opgesteld voor SVG 2, maar browsers hebben ze nooit geïmplementeerd, dus op het web boots je ze na met lagen, gebruik je een afbeelding of render je ze met WebGL.