# Verloopmaterialen uitgelegd: zijde, poollicht, korrel en de rest

[Canonical HTML page](https://gradiently.design/nl/guide/mark-materials-explained)

Twee Marks kunnen hetzelfde palet delen en er totaal anders uitzien, omdat het materiaal bepaalt hoe de kleur zich gedraagt. Een rondleiding langs de families, hoe lagen, licht en korrel samenkomen en wat elk zegt.

## The short version

- Een verloopmateriaal is de structuur die de kleur vult: een glans, een gloed, een weefsel, een steen, een korrel.
- Elke Gradiently Mark is opgebouwd uit maximaal drie gestapelde materiaallagen: een basis en tot twee erbovenop gemengd.
- De materialen van Gradiently zijn gegroepeerd in veertien families, van Kleurverloop en Licht tot Textiel, Mineraal, Glas, Metaal en Verf.
- Licht, korrel en beweging worden per laag ingesteld, dus hetzelfde materiaal kan rustig of dramatisch zijn.
- Kies een materiaal op wat zijn oppervlak oproept: korrel voor drukwerk en ambacht, zijde voor luxe, glas en chroom voor technologie.

**Verloopmaterialen** zijn wat een verloop op iets laat lijken in plaats van op een overgang tussen twee kleuren. Een materiaal is de structuur die de kleur vult: een gerichte glans in Zijde, gordijnen van licht in Poollicht, zachte bloemen in Mesh, zand in Zand, aders in marmer. Elke Gradiently Mark stapelt er maximaal drie, en voegt dan licht, korrel en beweging toe, en daarom kunnen twee Marks met hetzelfde palet er totaal anders uitzien.

## Wat een materiaal is

Zie een palet als de verf en een materiaal als het oppervlak waarop die wordt aangebracht. Giet hetzelfde marine, teal en oranje op zijde, matglas of handgeschept papier en je krijgt drie verschillende voorwerpen. In een Mark put elk materiaal uit het eigen palet van de Mark, dus een ander materiaal verandert het karakter zonder de kleuren te veranderen.

- Zijde: één gerichte glans: `linear-gradient(115deg, #1b2a3a 0%, #2f5d62 30%, #9fd3c7 46%, #2f5d62 60%, #1b2a3a 100%)`
- Poollicht: licht dat opstijgt: `linear-gradient(0deg, #9fd3c7 0%, #2f5d62 18%, #1b2a3a 55%, #0b1419 100%)`
- Mesh: zachte bloemen: `radial-gradient(circle at 30% 35%, #d9822b 0%, transparent 40%), radial-gradient(circle at 70% 65%, #2f5d62 0%, transparent 45%), linear-gradient(135deg, #1b2a3a 0%, #2f5d62 100%)`
- Halo: één plas licht: `radial-gradient(circle at 50% 40%, #d9822b 0%, #6b3410 30%, #0b1419 70%)`

CSS-schetsen van vier materialen in één palet. Echte Marks renderen veel rijkere structuur, maar zelfs deze laten zien hoeveel het materiaal bepaalt.

## De veertien materiaalfamilies

Gradiently groepeert zijn materialen in families op waar ze op lijken. De namen hieronder zijn echte materialen die je in de [Markt](/market) tegenkomt; elke familie bevat er veel meer.

| Familie | Wat het is | Materialen die je tegenkomt |
| --- | --- | --- |
| Kleurverloop | Overgangen, bollen en kleurvlakken | Hoeken, Bollen, Korrelgloed, Parel |
| Licht | Gloeden, flitsen en stralen | Halo, Podium, Neon, Stralen |
| Vloeibaar | Vloeistoffen, inkt en metaal | Inkt, Kwik, Stroop, Lava |
| Atmosfeer | Mist, wolk en lucht | Waas, Schemer, Stapelwolk, Meermist |
| Kosmisch | Gas, sterren en de diepe ruimte | Nevel, Galaxie, Melkweg, Eclips |
| Organisch | Groei, cellen en bloemblaadjes | Cellen, Koraal, Roos, Varen |
| Mineraal | Steen, marmer en zand | Ader, Zand, Agaat, Travertijn |
| Textiel | Zijde, weefsel en breisel | Zijde, Linnen, Fluweel, Satijn |
| Glas | Rijp, prisma en water | Berijpt, Prisma, Ribbel, Glas in lood |
| Geometrisch | Lijnen, stippen en tegels | Raster, Bogen, Rooster, Truchet |
| Korrel | Papier, druk en film | Vezel, Riso, Analoog, Dither |
| Metaal | Geborsteld, geanodiseerd en gesmolten | Geborsteld, Geanodiseerd, Gesmolten, Patina |
| Verf | Olie, gouache en penseel | Impasto, Gouache, Acryl, Spuitverf |
| Digitaal | Schermen, storing en pixels | Beeldbuis, Storing, Pixelsortering, Ledwand |

De families zoals Gradiently ze noemt. Korrel is een eigen familie en ook een instelling binnen elke laag.

### Zijde, poollicht en mesh

Naar deze drie wordt het vaakst gevraagd. **Zijde** is een gerichte glans over fijne draden: elegant, een tikje formeel, thuis in beauty en mode. **Poollicht** zijn gordijnen van licht die uit een heldere zoom in een donkere lucht opstijgen, dramatisch op een lege ondergrond. **Mesh** zijn zachte bloemen van kleur die in elkaar overgaan, het klassieke moderne verloop, vriendelijk en veelzijdig. [Zijdeverlopen](https://gradiently.design/nl/guide/silk-gradient), [poollichtverlopen](https://gradiently.design/nl/guide/aurora-gradients) en [meshverlopen](https://gradiently.design/nl/guide/mesh-gradients) hebben elk een eigen gids met CSS.

### Korrel, papier en druk

De familie Korrel laat een scherm er gedrukt uitzien. **Vezel** is handgeschept papier met lange vezels en een enkel spikkeltje, **Riso** is een druk in twee inkten, **Analoog** is filmkorrel, **Dither** zet kleur in pixeltrappen. Ze passen bij eten, ambacht, boeken en alles wat met de hand gemaakt moet voelen. Ze verbergen ook banding, de strepen die in gladde verlopen verschijnen, wat [korrelige verlopen](https://gradiently.design/nl/guide/grainy-gradients) uitlegt.

## Hoe lagen stapelen

Een Mark heeft een basislaag en tot twee lagen erbovenop. Elke bovenste laag heeft een eigen dekking en een overvloeimodus (normaal, scherm, vermenigvuldigen, bovenliggend of zacht), hetzelfde idee als lagen in een fotobewerker. Een gangbaar recept is een brede basis zoals Mesh of Waas voor het kleurvlak, een structuurlaag zoals Linnen of Raster voor textuur en een lichtlaag zoals Halo of Lichtlek voor focus.

```css
.card {
  background:
    /* top layer: a light, screened over the rest */
    radial-gradient(circle at 75% 20%, rgb(255 214 170 / 0.55) 0%, transparent 40%),
    /* middle layer: a fine stripe for texture */
    repeating-linear-gradient(90deg, rgb(255 255 255 / 0.05) 0 2px, transparent 2px 6px),
    /* base layer: the colour field */
    linear-gradient(160deg, #1b2a3a 0%, #2f5d62 60%, #5e8b7e 100%);
  background-blend-mode: screen, overlay, normal;
}
```

Drie gestapelde lagen in CSS, bovenste eerst: dezelfde basis-, textuur- en lichtstructuur die een Mark gebruikt, in zijn eenvoudigste vorm.

## Licht, korrel en beweging

Binnen elke laag veranderen een handvol instellingen hoe het materiaal zich gedraagt: zijn schaal, hoeveel het vervormt, hoeveel fijn detail het toont, hoe sterk het wordt belicht, hoeveel korrel erop zit en hoeveel het beweegt. Dezelfde Zijde kan een strakke, heldere glinstering zijn of een brede, gedimde draping. Beweging wordt door de hele Mark gedeeld, met eigen snelheid en drift, zodat de lagen samen bewegen in plaats van tegen elkaar in.

Een rustig staand ontwerp met een zacht, breed verloop en het ene woord Rustig

Een rustige Mark: brede structuur en zacht licht laten veel ruimte voor woorden.

Een levendig staand ontwerp met gedetailleerde, heldere textuur en het ene woord Luid

Een levendiger Mark: fijner detail en sterker licht passen bij lanceringen en evenementen.

Detail en woorden concurreren, en daarom kalmeren Marks drukke details bij tekst vanzelf. Een Mark weet waar de woorden staan: zijn rustigste gebied beweegt achter de tekst en de kleuren bij de letters worden dieper of lichter, zodat zelfs een getextureerd materiaal je kop leesbaar houdt.

## Hoe je een materiaal kiest

### Rustig, dagelijks

- Mesh, Waas, Zand, Linnen, Vezel
- Brede vormen, weinig detail
- Makkelijk achter lange koppen
- Goed voor dagelijkse posts en menu's

### Opvallend, af en toe

- Poollicht, Neon, Chroom, Storing, Holografische folie
- Sterk licht, fijne structuur
- Het best met heel weinig woorden
- Goed voor lanceringen, evenementen, covers

Vraag je af waar je merk van gemaakt is. Een bakkerij is meel, papier en warm licht, dus Vezel of Aquarel. Een studio die software verkoopt is glas en helder licht, dus Berijpt of Prisma. Vraag dan hoe vaak je erop gaat posten: hoe vaker, hoe rustiger het moet zijn. [Zo kies je de juiste Mark](https://gradiently.design/nl/guide/pick-the-right-mark) loopt de rest van de keuze langs, en in de Markt filter je rechtstreeks op materiaal.

## FAQ

### Wat is een verloopmateriaal?

De structuur die de kleuren van een verloop vullen, zoals een glans, een gloed, een weefsel of een steen. Het bepaalt of de kleur als zijde, glas, papier of licht leest.

### Hoeveel lagen kan een Mark hebben?

Maximaal drie: een basislaag en tot twee erbovenop, elk met een eigen dekking en overvloeimodus.

### Wat is het verschil tussen zijde en poollicht?

Zijde is een gerichte glans over fijne draden. Poollicht zijn gordijnen van licht die uit een heldere rand in een donkere lucht opstijgen.

### Maakt korrel tekst moeilijker leesbaar?

Een beetje korrel zelden, en het verbergt banding. Marks kalmeren ook drukke details achter woorden, zodat tekst leesbaar blijft.

### Kan ik de Markt op materiaal doorzoeken?

Ja. De Markt is te filteren op materiaal, naast kleur, ondergrond, sfeer en stijl, en te doorzoeken met woorden als "blauwe zijde".