# Een gradient generator gebruiken zonder op iedereen te lijken

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

Gradient generators zijn snel en nuttig, en ze leveren allemaal dezelfde paar looks op. De oplossing is geen betere generator, maar wat je doet in de vijf minuten nadat je op de knop hebt gedrukt.

## The short version

- Een gradient generator kiest kleuren, een richting en stops voor je en exporteert daarna CSS of een afbeelding.
- De meeste resultaten van generators lijken op elkaar omdat ze dezelfde standaardwaarden delen: twee stops, een diagonale hoek en zeer verzadigde kleuren.
- Beginnen bij je eigen kleuren in plaats van een willekeurig of populair palet is de grootste verandering die je kunt maken.
- Een derde stop toevoegen, de interpolatie veranderen, de richting aan de lay-out aanpassen en korrel toevoegen maken van een algemeen resultaat een specifiek resultaat.
- Test een gegenereerd kleurverloop altijd met echte tekst op ware grootte voordat je het gebruikt.

Een **gradient generator** is een tool die een kleurverloop voor je bouwt: je kiest kleuren of laat ze willekeurig bepalen, stelt een richting in en de tool exporteert CSS-code of een afbeelding. Het is de snelste weg naar een mooi verloop. Het is ook de reden dat zoveel websites, posts en presentaties dezelfde achtergronden van paars naar roze of van blauw naar cyaan delen. De generator is niet het probleem. Het eerste antwoord gebruiken wel.

Deze gids legt uit waarom resultaten van generators naar elkaar toe groeien en loopt zes aanpassingen door die een resultaat van jou maken. Voor sommige heb je de basis van [lineaire kleurverlopen in CSS](https://gradiently.design/nl/guide/css-linear-gradient) nodig.

## Wat een gradient generator precies doet

De meeste generators doen drie dingen. Ze kiezen twee of meer kleuren, met een kleurkiezer, een willekeurige worp of uit een bibliotheek met populaire paletten. Ze stellen een type en een richting in, meestal lineair onder een hoek. En ze schrijven de code uit, doorgaans één `linear-gradient()`-waarde, soms met een export als PNG of SVG. Sommige nieuwere tools maken mesh- of blobverlopen, en sommige werken met een tekstprompt.

Een bekend resultaat uit een generator: `linear-gradient(135deg, #667eea 0%, #764ba2 100%)`

Twee verzadigde stops onder 135 graden. Aantrekkelijk, en gedeeld door een zeer groot aantal pagina’s.

## Waarom resultaten uit generators op elkaar lijken

- **Standaard twee stops.** Verlopen van twee kleuren zijn het eenvoudigst om te genereren en het makkelijkst als doorsnee te herkennen.
- **Dezelfde hoek.** 135 graden, van linksboven naar rechtsonder, is een gangbare standaard en past bij bijna niets in het bijzonder.
- **Populaire paletten.** Bibliotheken tonen de meest gekopieerde combinaties eerst, dus de meest gebruikte kleurverlopen worden nog vaker gebruikt.
- **Maximale verzadiging.** Willekeurige kiezers en presets neigen naar felle kleuren, die indruk maken in een miniatuur en hard zijn achter tekst.
- **Geen materiaal.** Een kaal kleurverloop is glad, digitaal en vlak. Bijna elk gegenereerd kleurverloop heeft die afwerking.

Geen van die punten is op zich verkeerd. Samen leveren ze een look op die van iedereen is, het tegenovergestelde van wat een merk nodig heeft. [Branding met kleurverlopen](https://gradiently.design/nl/guide/gradient-branding) legt uit waarom dat verder gaat dan smaak.

## Zes aanpassingen die een gegenereerd kleurverloop van jou maken

1. **Begin bij je eigen kleuren** Plak je merkkleuren erin, of kleuren uit een foto die je mooi vindt, in plaats van willekeurige te laten kiezen. [Een palet uit een afbeelding halen](https://gradiently.design/nl/guide/color-palette-from-image) is een goede bron.
2. **Voeg een derde stop toe en verschuif hem** Een verwante middenkleur op 40% of 60%, niet op 50%, geeft het verloop een vorm. Het verloop helt nu, en dat leest als licht in plaats van als vulling.
3. **Verander de interpolatie** Mengen in OKLCH houdt kleuren levendig door het midden en voorkomt grijze plekken. Zie [kleurverlopen in OKLCH](https://gradiently.design/nl/guide/css-gradient-oklch).
4. **Pas de richting aan de lay-out aan** Richt het licht op de plek waar de inhoud staat. Een verticale val past bij een story, een lage horizon bij een banner en een radiale gloed bij een productfoto.
5. **Voeg korrel of een materiaal toe** Een fijne ruislaag verbergt banding en geeft het oppervlak structuur. Het is de snelste weg van digitaal naar tastbaar.
6. **Snijd uit, vul niet alleen** Gebruik een deel van een groter kleurverloop, of schaal het op zodat er maar één zachte overgang te zien is. Uitsnijden verandert het gevoel meer dan kleuren wisselen.

- 1. Het resultaat van de generator: `linear-gradient(135deg, #667eea 0%, #764ba2 100%)`
- 2. Eigen kleuren, derde stop op 60%: `linear-gradient(135deg, #1e2a5a 0%, #4f46e5 60%, #c084fc 100%)`
- 3. OKLCH, vallend van bovenaf: `linear-gradient(in oklch 170deg, #1e2a5a 0%, #4f46e5 60%, #f0abfc 100%)`
- 4. Omgevormd tot een lage gloed: `radial-gradient(circle at 70% 110%, #f0abfc 0%, #4f46e5 35%, #1e2a5a 70%, #0b1026 100%)`

Eén gegenereerd kleurverloop, vier keer aangepast. Elke stap kost minder dan een minuut en brengt het verder van de standaard.

## Van generator naar code voor productie

Generators exporteren vaak meer dan je nodig hebt, of minder. Controleer de code voordat je hem plakt: moderne browsers hebben voor kleurverlopen geen vendor prefixes meer nodig, en het loont om een effen reservekleur toe te voegen voor het zeldzame geval dat het kleurverloop niet wordt weergegeven.

```css
/* Edited generator output: solid fallback, own colours, OKLCH blend */
.hero {
  background-color: #1e2a5a;
  background-image: linear-gradient(in oklch 170deg, #1e2a5a 0%, #4f46e5 60%, #f0abfc 100%);
}
```

De achtergrondkleur is te zien als het kleurverloop niet kan worden weergegeven. Browsers die de syntaxis `in oklch` niet ondersteunen, negeren de hele declaratie, dus de reservekleur doet ertoe.

Gebruik je het kleurverloop in e-mail, als afbeelding voor social media of in drukwerk, exporteer dan een afbeelding in plaats van CSS. Genereer afbeeldingen op het uiteindelijke formaat, voeg korrel toe voor het exporteren en sla op als PNG om banden door compressie te voorkomen.

## Test voordat je publiceert

### Getest in de generator

- Een klein vierkant voorbeeld
- Zonder tekst erop
- Eén scherm, volle helderheid
- Op zichzelf beoordeeld

### Getest in echt gebruik

- Het echte formaat, op volle grootte en op telefoonformaat
- Echte koppen en lopende tekst, met het contrast gecontroleerd
- Een lichte en een donkere omgeving, meerdere schermen
- Naast je andere ontwerpen en die van je concurrenten

De meeste kleurverlopen gaan mis op contrast, niet op kleur. Zet je echte kop erop en controleer hem op het lichtste punt achter de tekst. [Tekst op een kleurverloop](https://gradiently.design/nl/guide/text-on-gradient) legt uit hoe.

## Wanneer een generator niet genoeg is

Een generator geeft je kleur. Hij geeft je geen oppervlak met materiaal, licht en beweging, en hij kan niet beloven dat niemand anders hetzelfde resultaat gebruikt. Wil je een kleurverloop dat van jou is, dan heb je iets nodig dat het vergelijkt met dat van alle anderen.

Zo werkt de Forge van Gradiently. Beschrijf een look in één zin of bouw hem regelaar voor regelaar op: tot acht kleuren, tot drie gestapelde materialen, licht, korrel en beweging. Voordat een nieuwe Mark wordt gepubliceerd, wordt hij vergeleken met elke andere Mark, en alles wat er te dicht bij ligt wordt geweigerd. Het resultaat rendert live achter je ontwerpen en kan precies één eigenaar hebben.

Een Mark is een gegenereerd kleurverloop dat verder gaat: een volledig recept, een openbare code en één eigenaar.

## FAQ

### Wat is een gradient generator?

Een gradient generator is een tool die een kleurverloop bouwt uit gekozen of willekeurige kleuren en een richting, en het daarna exporteert als CSS-code of als afbeelding.

### Waarom zien gegenereerde kleurverlopen er doorsnee uit?

De meeste delen dezelfde standaardwaarden: twee zeer verzadigde stops, een diagonale hoek, geen textuur en kleuren uit populaire paletten. Verander een van die dingen en het resultaat wordt eigener.

### Heb ik vendor prefixes nodig voor CSS-kleurverlopen?

Niet voor de huidige browsers. Een gewone linear-gradient()-waarde werkt, en een effen background-color ervoor geeft een reserve.

### Moet ik CSS of een afbeelding uit een gradient generator gebruiken?

Gebruik CSS voor websites, waar het licht is en scherp op elk formaat. Gebruik een geëxporteerde afbeelding voor e-mail, social posts en drukwerk.

### Hoe maak ik een kleurverloop dat niemand anders heeft?

Begin bij je eigen kleuren, voeg een materiaal of korrel toe en gebruik het consistent. In Gradiently wordt elke nieuwe Mark voor publicatie vergeleken met alle andere, en elke Mark heeft één eigenaar tegelijk.