# Mesh gradient: wat het is en hoe je er een maakt

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

Mesh gradients zijn de zachte, drijvende kleurvelden achter de helft van de lanceringspagina’s die je dit jaar hebt gezien. Zo werken ze, zo bouw je er een met de hand, en dit zijn de twee fouten die de meeste verpesten.

## The short version

- Een mesh gradient is een kleurverloop waarin meerdere kleurpunten in twee dimensies met elkaar mengen, in plaats van langs één lijn of vanuit één middelpunt.
- Mesh gradients ogen organisch omdat ze geen enkele richting hebben, dus ze lezen als licht, water of verf in plaats van als geometrie.
- CSS heeft geen type voor een mesh gradient, maar zachte radiale kleurverlopen stapelen op een donkere of lichte basiskleur geeft een overtuigend resultaat.
- De twee veelvoorkomende missers zijn modder, waar tegenovergestelde kleuren elkaar raken en grijs worden, en banding, waar subtiele verlopen in strepen breken.
- Drie tot vijf kleuren uit een verwante familie, één basiskleur en een beetje korrel zijn genoeg voor de meeste mesh gradients.

Een **mesh gradient** is een kleurverloop dat is opgebouwd uit meerdere kleurpunten, verspreid over een oppervlak, die elk in alle richtingen tegelijk in hun buren overlopen. Een lineair kleurverloop beweegt langs één lijn en een radiaal kleurverloop spreidt zich uit vanuit één middelpunt. Een mesh heeft geen enkel pad, dus kleur verzamelt zich, drijft en overlapt als licht door water. Daarom voelen mesh gradients organisch, en daarom zijn ze de standaardlook geworden voor hero’s, wallpapers en albumhoezen.

Deze gids legt uit hoe een mesh werkt, hoe je er een maakt in CSS en in ontwerptools, en hoe je de grijze plekken en strepen vermijdt waardoor zoveel ervan goedkoop ogen. Voor de andere vormen, zie [soorten kleurverlopen](https://gradiently.design/nl/guide/types-of-gradients).

## Wat een kleurverloop tot een mesh maakt

In een echt verloopnet, zoals dat in Adobe Illustrator, is het oppervlak verdeeld in een raster. Elk punt op het raster heeft een kleur, en de software mengt vloeiend tussen naburige punten en buigt het raster om de kleur te sturen. Kleurverlopen met vrije vorm laten het raster los en laten je kleurpunten overal neerzetten. Mesh gradients voor web en social media nemen meestal een derde route: zachte kleurvlekken die over een basis worden gelegd en in elkaar overlopen.

Alle drie delen één idee. De kleur van elke pixel is een mix van de kleurpunten in de buurt, gewogen naar hoe dichtbij ze zijn. Verplaats één punt en alleen zijn omgeving verandert, en daardoor kan een mesh handgemaakt aanvoelen in plaats van berekend.

- Nachtbasis: #0b1026
- Violette plas: #7c3aed
- Hemelblauwe plas: #0ea5e9
- Petrol plas: #14b8a6
- Roze accent: #f472b6

Een recept voor een mesh: één basiskleur en vier kleurpunten. Violet, hemelblauw en petrol liggen naast elkaar op de kleurencirkel, dus hun overlappingen blijven schoon. Roze is het enige accent.

## Waarom mesh gradients organisch aanvoelen

### Lineair of radiaal

- Eén richting of één middelpunt
- Het oog volgt de lijn of het doel
- Voelt ontworpen en geometrisch
- Makkelijk te herkennen als preset

### Mesh

- Meerdere kleurpunten, geen enkele richting
- Het oog dwaalt en rust
- Voelt als licht, water of verf
- Elke opstelling is net iets anders

Dat dwalende is ook het gevaar. Zonder structuur kan een mesh op een willekeurige waas lijken. Goede hebben een compositie: een helder deel waar het oog het eerst landt, een donkerder deel dat gewicht geeft, en een rustig deel waar woorden kunnen staan.

## Een mesh gradient maken in CSS

1. **Stel een basiskleur in** Kies een donkere of lichte ondergrond. Die schijnt door overal waar de kleurplassen uitdoven, dus hij bepaalt de stemming van het geheel.
2. **Plaats drie tot vijf kleurplassen** Elke plas is een `radial-gradient` met het middelpunt op een positie met `at x% y%`, die uitdooft naar `transparent`. Zet ze bij hoeken en randen in plaats van in het midden.
3. **Laat ze overlappen** Laat elke plas tussen 45% en 60% van de weg uitdoven, zodat buren elkaar raken. In de overlappingen krijgt de mesh zijn rijkdom.
4. **Laat een rustige zone vrij** Houd één deel grotendeels basiskleur, meestal waar je kop komt. Zie [tekst op een kleurverloop](https://gradiently.design/nl/guide/text-on-gradient).
5. **Voeg korrel toe** Een lichte ruislaag verbergt strepen en voegt diepte toe. [Korrelige kleurverlopen](https://gradiently.design/nl/guide/grainy-gradients) laat de code zien.

```css
.mesh {
  background-color: #0b1026;
  background-image:
    radial-gradient(at 12% 18%, #7c3aed 0px, transparent 55%),
    radial-gradient(at 88% 12%, #0ea5e9 0px, transparent 50%),
    radial-gradient(at 80% 88%, #14b8a6 0px, transparent 55%),
    radial-gradient(at 20% 92%, #f472b6 0px, transparent 45%);
}
```

Het palet hierboven als mesh in CSS. De laag die als eerste staat, wordt bovenop geschilderd, dus zet je sterkste kleur vooraan.

Omdat de plassen percentages zijn, schaalt de mesh mee met zijn vak. Pas bij heel verschillende vormen, zoals een hoge story en een brede banner, de posities bij `at` aan, zodat het heldere deel nog steeds landt waar je het wilt. Hetzelfde palet kun je traag animeren door die posities te verplaatsen. [Geanimeerde achtergronden met kleurverloop](https://gradiently.design/nl/guide/animated-gradient-background) legt uit hoe je dat doet zonder de prestaties te schaden.

## Een mesh gradient maken in ontwerptools

In tools met een echt verloopnet of een kleurverloop met vrije vorm zet je de kleurpunten direct neer en sleep je ze tot de compositie werkt. In tools zonder werkt de vervaagmethode overal: teken drie tot vijf zachte vormen in je kleuren op een basisrechthoek, vervaag ze zwaar, vaak met een kwart van de canvasbreedte of meer, en laat ze overlappen. Leg er daarna een korrellaag overheen en exporteer op het uiteindelijke formaat in plaats van op te schalen.

Een staande post waarvan de kop op een helder, druk deel van een mesh gradient staat

Woorden die recht over een druk deel van de mesh liggen, vechten met de kleur.

Dezelfde staande post met een rustiger, donkerder deel van de mesh achter de kop

Dezelfde mesh met een rustige zone achter de woorden lees je in één oogopslag.

## Fouten met mesh gradients en hoe je ze oplost

| Probleem | Waarom het gebeurt | Oplossing |
| --- | --- | --- |
| Grijze of bruine plekken | Tegenovergestelde kleuren, zoals oranje en blauw, raken elkaar en heffen elkaar op | Houd naburige plassen dicht bij elkaar in tint, of scheid tegenpolen met een derde kleur. Zie [modderige kleurverlopen](https://gradiently.design/nl/guide/muddy-gradients) |
| Zichtbare strepen | Grote, subtiele verlopen stappen tussen de tinten die een scherm kan tonen | Voeg korrel toe en vermijd zware JPEG-compressie. Zie [banding in kleurverlopen](https://gradiently.design/nl/guide/gradient-banding) |
| Een vlek in het midden | Plassen in het midden van het canvas lijken op een schietschijf | Duw plassen naar randen en hoeken |
| Regenboogruis | Te veel kleuren die niets met elkaar te maken hebben | Drie tot vijf kleuren uit één familie plus één accent |
| Geen plek voor woorden | Kleur gelijkmatig verspreid over het hele oppervlak | Plan een rustige zone voordat je de plassen plaatst |

Bijna elke zwakke mesh gradient heeft een van deze vijf problemen.

Een mesh is maar zo goed als zijn palet. Weet je niet zeker welke kleuren schoon mengen, begin dan met een familie van [analoge kleuren](https://gradiently.design/nl/guide/analogous-colors) en voeg bij één plas één contrasterend accent toe.

Een Mark is een mesh gradient die goed is afgewerkt: plassen in balans, materiaal, korrel en licht, live gerenderd voor elk formaat waarin je ontwerpt.

Beschrijf je een mesh liever dan dat je er een bouwt, dan maakt de Forge nieuwe Marks vanuit één zin of regelaar voor regelaar, met tot acht kleuren en drie gestapelde materialen.

## FAQ

### Wat is een mesh gradient?

Een mesh gradient mengt meerdere kleurpunten in twee dimensies over een oppervlak, dus kleur verzamelt zich en overlapt organisch in plaats van één lijn of één middelpunt te volgen.

### Kun je een mesh gradient maken in CSS?

Ja, bij benadering. Stapel drie tot vijf lagen met `radial-gradient`, die elk uitdoven naar transparant, op een basiskleur als achtergrond.

### Hoeveel kleuren moet een mesh gradient hebben?

Drie tot vijf kleuren plus een basis werkt meestal het best. Meer dan dat oogt al snel als regenboogruis in plaats van als een gecomponeerd veld.

### Waarom oogt mijn mesh gradient modderig?

Tegenovergestelde kleuren raken elkaar en mengen richting grijs. Houd naburige kleuren dicht bij elkaar in tint, of zet een overbruggende kleur tussen tegenpolen.

### Wat is het verschil tussen een mesh gradient en een kleurverloop met vrije vorm?

Een klassiek verloopnet houdt kleuren vast op een raster van punten dat je kunt buigen. Bij een kleurverloop met vrije vorm zet je kleurpunten overal neer, zonder raster. Beide mengen in twee dimensies.