# Kleurverlopen in Figma: tips voor vloeiendere resultaten

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

Figma maakt een kleurverloop in twee klikken en een goed kleurverloop in twintig. Hier is de snelle route door de gradient-editor, plus de oplossingen voor grijze middens, banding en CSS die niet klopt.

## The short version

- Figma biedt vier soorten gradient fills: Linear, Radial, Angular en Diamond, allemaal te kiezen in het menu voor het fill-type in de kleurkiezer.
- Richting en lengte van het kleurverloop stel je in met handvatten op het canvas, en nieuwe kleurstops voeg je toe door op de gradientbalk in de kleurkiezer te klikken.
- Lange kleurverlopen in Figma tussen ver uiteenliggende tinten kunnen in het midden grijs worden, dus voeg een middelste stop toe in een helderdere tussenkleur.
- Lineaire, radiale en angular kleurverlopen hebben een directe CSS-tegenhanger, maar diamond-kleurverlopen niet en die exporteer je het best als afbeelding.
- Een mesh-achtig kleurverloop in Figma maak je meestal door een groep gekleurde ellipsen te vervagen, en korrel verbergt banding in de export.

Om een **gradient in Figma** te maken, selecteer je een laag, klik je op het kleurvakje van de fill en verander je het fill-type van Solid naar Linear, Radial, Angular of Diamond. Er verschijnen handvatten op het canvas: sleep ze om richting en bereik van de overgang in te stellen, en klik op de gradientbalk in de kleurkiezer om kleurstops toe te voegen. Dat kost seconden. Het vloeiend, rijk en identiek laten ogen zodra het in code belandt, vraagt een paar extra gewoontes, en daar gaat deze gids over.

## De vier soorten kleurverlopen in Figma

- Linear: `linear-gradient(135deg, #0f172a, #4338ca 55%, #a5b4fc)`
- Radial: `radial-gradient(ellipse at 50% 50%, #fde68a, #f97316 45%, #7c2d12)`
- Angular: `conic-gradient(from 0deg, #0ea5e9, #a855f7, #f43f5e, #f59e0b, #0ea5e9)`

Linear, radial en angular fills, hier getekend met hun CSS-tegenhangers. Diamond heeft geen CSS-tegenhanger.

| Fill in Figma | Wat het tekent | CSS-tegenhanger |
| --- | --- | --- |
| Linear | Een overgang langs een rechte lijn | `linear-gradient()` |
| Radial | Een overgang vanuit een middelpunt naar buiten, als ellips | `radial-gradient()` |
| Angular | Een zwaai van kleur rond een middelpunt | `conic-gradient()` |
| Diamond | Een overgang naar buiten in de vorm van een ruit met vier punten | Geen; exporteer als afbeelding |

De soorten kleurverlopen in Figma en hoe ze zich naar het web vertalen.

Linear past bij de meeste achtergronden en knoppen. Radial past bij gloed en spotlights. Angular tekent kleurcirkels, wijzerplaten en metaalachtige glans. Diamond heb je zelden nodig; het geeft een gefacetteerde gloed in vier richtingen die in illustraties opvalt, maar op het web een bitmap moet worden. Voor hoe elk type zich in ontwerp in het algemeen gedraagt, zie [de soorten kleurverlopen](https://gradiently.design/nl/guide/types-of-gradients).

## Werken met de gradient-editor

1. **Stel de richting in met de handvatten** Het ene handvat markeert waar de eerste kleur zit, het andere waar de laatste zit. Sleep het eindhandvat voorbij de rand van het frame voor een zachtere overgang, of trek het naar binnen voor een kortere, steilere.
2. **Voeg stops toe op de balk** Klik ergens op de gradientbalk in de kleurkiezer om een stop toe te voegen en geef hem een kleur. Selecteer een stop en druk op Delete om hem te verwijderen.
3. **Gebruik de dekking van stops voor vervagingen** Elke stop heeft een eigen dekking. Een kleur naar 0% dekking laten vervagen, laat een kleurverloop over een foto of een andere fill liggen.
4. **Stapel fills** Eén laag kan meerdere fills bevatten. Voeg een tweede kleurverloop boven het eerste toe, met doorzichtige delen, om een gloed over een basisovergang te leggen.
5. **Bewaar het als stijl** Sla de afgeronde fill op als kleurstijl, zodat het hele team hetzelfde kleurverloop gebruikt. Variabelen in Figma bevatten geen kleurverlopen, stijlen wel.

> **Radiale handvatten** Radial en diamond fills hebben een derde handvat dat de breedte van de ellips los van de hoogte instelt. Door dat uit te rekken maak je een brede horizongloed in plaats van een ronde spotlight.

## Grijze middens en modderige overgangen oplossen

Figma mengt kleurstops rechtstreeks, net als CSS standaard doet, en heeft geen optie om in een perceptuele kleurruimte te mengen. Een lange overgang tussen ver uiteenliggende tinten, zoals blauw naar oranje of blauw naar geel, zakt in het midden weg naar grijs. De oplossing is een middelste stop: kies de kleur die je in het midden wilt, meestal een helderdere tussentint, en voeg die met de hand toe. [Modderige kleurverlopen](https://gradiently.design/nl/guide/muddy-gradients) legt de kleurtheorie uit.

- Twee stops: grijs midden: `linear-gradient(90deg, #2563eb, #f97316)`
- Middelste stop erbij: levendig: `linear-gradient(90deg, #2563eb, #db2777 50%, #f97316)`

Blauw naar oranje, voor en na één extra stop. De middelste stop leidt de overgang via roze in plaats van grijs.

## Mesh-achtige kleurverlopen in Figma

Figma heeft geen tool voor mesh gradients, maar een overtuigende versie bouw je snel. Teken vier of vijf ellipsen in je kleuren, overlappend, in een frame met een donkere of lichte achtergrond. Groepeer ze, geef de groep een grote Layer blur en laat het frame de inhoud bijsnijden. Verschuif de ellipsen om de kleur opnieuw in balans te brengen. Dit is hetzelfde idee als de gelaagde techniek in [CSS-mesh-gradients](https://gradiently.design/nl/guide/css-mesh-gradient), en [mesh gradients](https://gradiently.design/nl/guide/mesh-gradients) behandelt de ontwerpkant.

### Vermijd

- Even grote ellipsen op gelijke afstand
- Tegenovergestelde tinten die in het midden overlappen
- Kleine blurwaarden die harde ellipsranden laten staan
- Een grote, donkere, vervaagde mesh exporteren zonder korrel

### Doe

- Eén dominante vlek, twee of drie kleinere
- Naburige tinten die overlappen, contrasten uit elkaar gehouden
- Een blur groot genoeg dat er geen randen overblijven
- Een vage ruislaag erbovenop voor het exporteren

## Korrel toevoegen om banding te verbergen

Gladde kleurverlopen die als 8-bit PNG of JPEG worden geëxporteerd, kunnen zichtbare trapjes tonen, vooral in donkere, trage overgangen. Een lichte ruislaag breekt die trapjes op. Recente versies van Figma hebben opties voor ruis en textuur in het Effects-paneel; zo niet, leg dan een herhalende ruisafbeelding boven het kleurverloop met een overvloeimodus zoals Overlay of Soft light op lage dekking. [Banding in kleurverlopen](https://gradiently.design/nl/guide/gradient-banding) legt uit waarom dit werkt, en [korrelige kleurverlopen](https://gradiently.design/nl/guide/grainy-gradients) waarom het er ook beter uitziet.

## Kleurverlopen uit Figma exporteren en in CSS laten kloppen

In Dev Mode of het Inspect-paneel toont Figma CSS voor gradient fills. Behandel dat als startpunt en controleer drie dingen. Ten eerste de hoek: de handvatten die je op een niet-vierkant frame hebt gesleept, kunnen een hoek opleveren die je zelf niet had gekozen, dus rond hem af op een nette waarde. Ten tweede het kleurprofiel: gebruikt je bestand Display P3, dan kunnen dezelfde hexwaarden er in een sRGB-browser anders uitzien. Ten derde gestapelde fills: die worden kleurverlopen gescheiden door komma’s, met de bovenste fill uit Figma als eerste.

```css
/* Figma: linear fill, #0f172a to #4338ca to #a5b4fc, top left to bottom right */
.hero {
  background-color: #0f172a;
  background-image: linear-gradient(135deg, #0f172a 0%, #4338ca 55%, #a5b4fc 100%);
}

/* Figma: angular fill */
.dial {
  background-image: conic-gradient(from 0deg, #0ea5e9, #a855f7, #f43f5e, #f59e0b, #0ea5e9);
}
```

Gebruikelijke vertalingen. Houd een vlakke terugvalkleur aan uit de donkerste stop van het kleurverloop.

Exporteer afbeeldingen op 2x voor scherpe resultaten op schermen met een hoge pixeldichtheid, en kies PNG voor kleurverlopen met transparantie. Voor kleurverlopen die vector moeten blijven, schrijft de SVG-export lineaire en radiale fills als SVG-kleurverlopen; zie [SVG-kleurverlopen](https://gradiently.design/nl/guide/svg-gradients) om te begrijpen wat je krijgt. Diamond fills, vervaagde meshes en ruis komen altijd als pixels naar buiten.

Bouw je veel kleurverloopachtergronden voor social posts, presentaties en banners, dan bespaart een tool die hetzelfde materiaal op elk formaat rendert je het steeds opnieuw exporteren. In Gradiently rendert een Mark live op elk formaat in plaats van uit één export te worden bijgesneden.

## FAQ

### Hoe maak ik een kleurverloop in Figma?

Selecteer een laag, klik op het kleurvakje van de fill en verander Solid in Linear, Radial, Angular of Diamond. Sleep de handvatten op het canvas en klik op de gradientbalk om stops toe te voegen.

### Hoe voeg ik een kleurstop toe aan een kleurverloop in Figma?

Klik ergens op de gradientbalk in de kleurkiezer. Selecteer een stop en druk op Delete om hem te verwijderen.

### Kan Figma mesh gradients maken?

Niet standaard. Laat een paar gekleurde ellipsen overlappen, groepeer ze en pas een grote Layer blur toe, of gebruik een plug-in.

### Waarom ziet mijn kleurverloop uit Figma er in de browser anders uit?

Controleer de hoek die Figma exporteerde, of het bestand een Display P3-kleurprofiel gebruikt en of gestapelde fills in de juiste volgorde zijn vertaald.

### Kan ik een kleurverloop uit Figma als CSS kopiëren?

Ja voor linear, radial en angular fills, via Dev Mode of het Inspect-paneel. Diamond-kleurverlopen hebben geen CSS-tegenhanger en exporteer je als afbeelding.