# CSS-verloopgenerator: schrijf verlopen met de hand of met tools

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

Het meeste gegenereerde verloopcode is prima om te plakken en een tikje verouderd. Leer de vier onderdelen van een verloop en je schrijft er sneller een dan je een generator vindt, en stemt het af op manieren die geen schuifregelaar biedt.

## The short version

- Een CSS-verloopgenerator zet keuzes voor kleur en hoek om in een background-image-waarde die je in een stylesheet kunt plakken.
- Elk CSS-verloop heeft vier onderdelen: een type, een richting of positie, een optionele interpolatiekleurruimte en een lijst kleurstops.
- Oudere generators leveren nog voorvoegsels van leveranciers en verouderde Internet Explorer-filters op, die moderne browsers niet nodig hebben.
- Een derde kleurstop, een interpolatieruimte zoals oklch of een tweede laag verbetert gegenereerde uitvoer meestal meer dan het veranderen van de kleuren.
- Een afgewerkt verloop in een custom property opslaan maakt het herbruikbaar op een hele site en makkelijk op één plek te wijzigen.

Een **CSS-verloopgenerator** geeft je een verloopwaarde om te plakken, zoals `linear-gradient(135deg, #1e1b4b 0%, #6d28d9 100%)`, nadat je kleuren en een hoek hebt gekozen. Het is een prima beginpunt. Maar een CSS-verloop is kort genoeg om in minder dan een minuut met de hand te schrijven, en in met de hand geschreven code zitten de verbeteringen: een derde stop, een betere kleurruimte, een tweede laag. Deze pagina laat zien hoe je generatoruitvoer leest, opschoont en je eigen verloop schrijft.

## De vier onderdelen van elk CSS-verloop

```css
.hero {
  background-image: linear-gradient(
    160deg            /* 1. direction: an angle or "to right" */
    in oklch,         /* 2. optional: the colour space to blend in */
    #1e1b4b 0%,       /* 3. colour stops: colour and position */
    #6d28d9 55%,
    #f472b6 100%
  );
}

/* 4. the type: linear, radial or conic */
.glow { background-image: radial-gradient(circle at 80% 20%, #f472b6, #1e1b4b 70%); }
.dial { background-image: conic-gradient(from 90deg, #6d28d9, #f472b6, #6d28d9); }
```

Alles wat de schuifregelaars van een generator bepalen, past op een van deze vier onderdelen.

| Onderdeel | Opties | Standaard als je het weglaat |
| --- | --- | --- |
| Type | `linear`, `radial`, `conic`, plus `repeating`-versies | Geen, je moet kiezen |
| Richting of positie | `160deg`, `to top right`, `circle at 80% 20%`, `from 90deg` | Van boven naar beneden; gecentreerde ellips; vanaf 0deg |
| Kleurruimte | `in oklab`, `in oklch`, `in srgb` en andere | sRGB voor hexkleuren |
| Stops | Alle kleuren, met optionele posities in procenten of lengte | Gelijkmatig verdeeld van 0% tot 100% |

De standaardwaarden verklaren waarom zoveel gegenereerde verlopen op elkaar lijken: twee stops, gelijkmatig verdeeld, gemengd in sRGB.

Elk type heeft een eigen gids: [lineaire verlopen](https://gradiently.design/nl/guide/css-linear-gradient), [radiale verlopen](https://gradiently.design/nl/guide/css-radial-gradient) en [conische verlopen](https://gradiently.design/nl/guide/css-conic-gradient).

## Verlooprecepten om te kopiëren

Deze zijn met de hand geschreven in plaats van gegenereerd, en elk gebruikt één idee dat een eenvoudige generator zelden geeft: een licht naast het midden, drie stops in plaats van twee, of een gekozen kleurruimte. Klik op een recept om het te kopiëren.

- Schemering, drie stops: `linear-gradient(160deg, #1e1b4b 0%, #6d28d9 50%, #f472b6 100%)`
- Zeeglas: `linear-gradient(135deg, #ecfeff 0%, #99f6e4 50%, #2dd4bf 100%)`
- Gloed in de hoek: `radial-gradient(circle at 85% 15%, #fb923c 0%, #9a3412 35%, #1c0a05 75%)`
- Zacht papier: `linear-gradient(180deg, #fdf6ec 0%, #f5e6d3 100%)`
- Noorderlijk groen: `radial-gradient(ellipse at 30% 70%, #34d399 0%, #0f766e 40%, #042f2e 80%)`
- Violet naar oranje via roze: `linear-gradient(90deg in oklch, #7c3aed, #f97316)`

De laatste heeft maar twee stops, maar mengen in oklch laat de tint door een levendig roze lopen, waar sRGB een doffer mauve geeft. Browsers zonder ondersteuning voor kleurruimtes vallen terug op geen verloop, dus declareer eerst een gewoon verloop.

## Generatoruitvoer opschonen

Plak je iets uit een oudere generator, dan krijg je misschien vijf regels waar er één volstaat. Verlopen met voorvoegsel en het Internet Explorer-filter zijn al jaren overbodig; ze maken het zwaarder en het oude `-webkit-`-syntax gebruikt een ander hoeksysteem dat iedereen verwart die het later bewerkt.

### Typische oude uitvoer

- `background: #1e1b4b;` en dan drie kopieën met voorvoegsel
- `-webkit-linear-gradient(left, ...)` met de oude hoekregels
- `filter: progid:DXImageTransform...` voor Internet Explorer
- `rgba(30, 27, 75, 1)` voor volledig dekkende kleuren

### Schone moderne code

- Eén effen `background-color` als terugval
- Eén `linear-gradient()` zonder voorvoegsel
- Geen filters
- Korte hex of `rgb(30 27 75 / 0.5)` alleen waar alfa ertoe doet

```css
.hero {
  background-color: #1e1b4b; /* shows while loading and if the gradient fails */
  background-image: linear-gradient(160deg, #1e1b4b 0%, #6d28d9 55%, #f472b6 100%);
}
```

Alles wat de uitvoer van een oude generator probeerde te zeggen, in twee regels.

Je browser is ook een redelijke generator. Open de ontwikkelaarstools, selecteer het element en klik in het paneel Styles op een kleurstaaltje in het verloop: je krijgt een kleurkiezer voor die stop en kunt hoeken en percentages ter plekke aanpassen terwijl de pagina live meebeweegt. Kopieer de afgewerkte waarde terug naar je stylesheet. Om een verloop af te stemmen op echte inhoud wint dat van elke losse tool, want je ziet het achter je eigen kop.

## Vijf aanpassingen die elke schuifregelaar verslaan

1. **Voeg een middelste stop toe** Twee stops geven een rechte helling. Een derde kleur op ongeveer 50 tot 60 procent voegt diepte toe en laat je bepalen waar de verandering plaatsvindt.
2. **Kies de kleurruimte** Voeg `in oklab` toe om overgangen tussen verre kleuren zuiver te houden, of `in oklch` om de tint te laten reizen. [Verloopinterpolatie](https://gradiently.design/nl/guide/gradient-interpolation) laat het verschil zien.
3. **Verplaats het licht naast het midden** Vervang een lineair verloop door `radial-gradient(circle at 80% 20%, ...)` zodat de helderste kleur uit een hoek komt, als een lichtbron.
4. **Laag twee of drie verlopen** Scheid meerdere waarden in `background-image` met komma’s. Radiale gloeden over een lineaire basis ogen veel rijker dan één verloop; [CSS-meshverlopen](https://gradiently.design/nl/guide/css-mesh-gradient) gaan hier verder mee.
5. **Voeg een beetje korrel toe** Een vage ruislaag verbergt banding op grote, donkere verlopen. De code staat in [CSS-ruistextuur](https://gradiently.design/nl/guide/css-noise-texture).

```css
.hero {
  background-color: #0f0b1e;
  background-image:
    radial-gradient(circle at 80% 15%, #f472b6 0%, transparent 40%),
    radial-gradient(circle at 15% 85%, #4338ca 0%, transparent 45%),
    linear-gradient(160deg, #0f0b1e 0%, #1e1640 100%);
}
```

Drie lagen met de hand geschreven: een roze licht rechtsboven, een indigo poel linksonder, een donkere basis. De eerst genoemde laag ligt bovenop.

## Een verloop omzetten in een herbruikbaar token

Als een verloop klopt, geef het dan een naam. Een custom property bevat de hele waarde, zodat knoppen, banners en de hero het kunnen delen en een herontwerp één regel raakt. [CSS-variabelen voor theming](https://gradiently.design/nl/guide/css-custom-properties-theming) laat zien hoe je verlooptokens per merk of modus verwisselt.

```css
:root {
  --gradient-brand: linear-gradient(160deg, #1e1b4b 0%, #6d28d9 55%, #f472b6 100%);
}

.hero { background-image: var(--gradient-brand); }
.badge { background-image: var(--gradient-brand); }
```

Eén definitie, overal gebruikt. Als de kleuren veranderen, hoeft er niets anders in de stylesheet te veranderen.

## Wanneer een generator niet het juiste hulpmiddel is

Generators en met de hand geschreven CSS delen dezelfde grens: het resultaat is een lijst stops die iedereen in je stylesheet kan lezen en hergebruiken. Voor interfacedetails is dat prima. Voor de achtergrond waaraan mensen je herkennen, op je site en in elke post, wil je misschien iets rijkers en moeilijkers te kopiëren. Het bredere advies staat in [een verloopgenerator gebruiken](https://gradiently.design/nl/guide/gradient-generator).

De Marks van Gradiently gaan verder dan wat CSS kan beschrijven: gestapelde materialen, licht, korrel en beweging, live gerenderd op elk formaat, met telkens precies één eigenaar. Je kunt met elke vrije Mark gratis ontwerpen en in de Markt op kleurwoorden zoeken om er een te vinden die dicht bij het verloop komt dat je probeerde te schrijven.

## FAQ

### Wat is een CSS-verloopgenerator?

Een tool waarmee je kleuren, hoek en type visueel kiest en die dan een `linear-gradient()`-, `radial-gradient()`- of `conic-gradient()`-waarde geeft om in CSS te plakken.

### Heb ik nog -webkit--voorvoegsels nodig voor CSS-verlopen?

Nee. Verlopen zonder voorvoegsel werken in elke huidige browser. Verwijder kopieën met voorvoegsel en oude Internet Explorer-filters uit gegenereerde code.

### Hoe schrijf ik een CSS-verloop met de hand?

Kies een type, een richting en twee of meer kleurstops: `linear-gradient(160deg, #1e1b4b, #6d28d9 55%, #f472b6)`.

### Waarom ziet mijn gegenereerde verloop er in het midden modderig uit?

Het mengt in sRGB, dat tussen verre kleuren grijs wordt. Voeg `in oklab` toe na de hoek, of een middelste stop in een zuiverdere kleur.

### Hoe hergebruik ik een verloop op een hele website?

Sla het hele verloop op in een custom property zoals `--gradient-brand` en gebruik `var(--gradient-brand)` waar je het nodig hebt.