# Conic gradients: kleurenwielen, grafieken en glans

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

Lineaire kleurverlopen reizen, radiale verspreiden zich en conic gradients draaien. Dat ene verschil maakt ze het juiste gereedschap voor wielen, metaal en lichtstralen.

## The short version

- Een conic gradient verandert van kleur terwijl hij rond een middelpunt draait, dus zijn stops zijn hoeken in plaats van afstanden.
- Conic gradients zijn de natuurlijke manier om kleurenwielen, taart- en donutdiagrammen, metaalglans en lichtstralen te tekenen.
- Ontwerptools noemen hetzelfde vaak een hoekverloop, in het Engels angular gradient.
- Elke conic gradient heeft een scherp punt in het midden en een naad waar de cirkel sluit, dus beide vragen aandacht.
- Een conic gradient met harde stops wordt een diagram, en met zachte stops een oppervlak dat licht lijkt te vangen.

Een **conic gradient** verandert van kleur terwijl hij rond een middelpunt draait, zoals de wijzer van een klok over zijn wijzerplaat gaat. Een lineair kleurverloop verandert langs een lijn en een radiaal kleurverloop verandert naar buiten toe, maar een conic gradient verandert met de hoek. Kijk recht van boven op een kegel die in banden is geverfd en je ziet hetzelfde, en daar komt de naam vandaan. Figma en enkele andere tools noemen het een **angular gradient**.

Dat hoekgebaseerde gedrag maakt conic gradients goed in dingen die andere kleurverlopen niet kunnen: kleurenwielen, cirkeldiagrammen, geborsteld metaal, sterrenbursts en lichtstralen. Deze gids behandelt ze allemaal met levende voorbeelden. De volledige CSS-syntaxis staat in [CSS conic-gradient()](https://gradiently.design/nl/guide/css-conic-gradient).

## Hoe een conic gradient werkt

Je stelt een middelpunt in, een starthoek en een lijst kleuren met hoeken of percentages. Nul graden wijst omhoog en de draai loopt met de klok mee. Waar de ene kleur eindigt en de volgende begint is een stop, precies als bij andere kleurverlopen, behalve dat 25% een kwartslag betekent, niet een kwart van de breedte.

Kleurenwiel: `conic-gradient(from 0deg at 50% 50%, #ef4444, #f59e0b, #eab308, #22c55e, #06b6d4, #3b82f6, #8b5cf6, #ec4899, #ef4444)`

Een volledige tintencirkel. De laatste kleur herhaalt de eerste, zodat de cirkel zonder naad sluit.

Die herhaling van de eerste kleur aan het eind is belangrijk. Verschilt de laatste stop van de eerste, dan krijg je een harde lijn recht omhoog vanuit het midden waar de draai zijn eigen begin ontmoet. De gids over het [kleurenwiel](https://gradiently.design/nl/guide/color-wheel) legt uit hoe je de tinten op zo’n wiel leest.

## Voorbeelden van conic gradients voor design

- Harde stops: diagramsegmenten: `conic-gradient(#7c3aed 0% 45%, #f472b6 45% 75%, #fcd34d 75% 100%)`
- Glans van geborsteld metaal: `conic-gradient(from 45deg at 50% 50%, #d4d4d8, #71717a, #f4f4f5, #52525b, #e4e4e7, #71717a, #d4d4d8)`
- Lichtstraal: `conic-gradient(from 160deg at 50% -10%, #0b0b14 0deg, #fde68a 20deg, #0b0b14 40deg)`
- Sterrenburst: `repeating-conic-gradient(from 0deg at 50% 50%, #f97316 0deg 10deg, #fdba74 10deg 20deg)`
- Iriserend pastel: `conic-gradient(from 200deg at 60% 45%, #fbcfe8, #c7d2fe, #a5f3fc, #d9f99d, #fde68a, #fbcfe8)`
- Hoekdraai: `conic-gradient(from 0deg at 0% 100%, #0f172a 0deg, #1d4ed8 45deg, #67e8f9 90deg)`

Zes conic gradients. Harde stops maken diagrammen en bursts; zachte stops maken oppervlakken en licht.

### Taart- en donutdiagrammen

Geef elke kleur een begin- en een eindhoek en het kleurverloop wordt een cirkeldiagram, zonder afbeelding en zonder grafiekbibliotheek. Voeg een rond masker toe en het wordt een donut. Dit past bij eenvoudige, decoratieve data op posts en dia’s. Voeg voor echte rapportage labels toe, want een diagram dat alleen op kleur leunt laat mensen die kleur anders zien in de steek.

```css
.donut {
  width: 160px;
  aspect-ratio: 1;
  border-radius: 50%;
  /* 45%, 30% and 25% of the circle */
  background: conic-gradient(#7c3aed 0% 45%, #f472b6 45% 75%, #fcd34d 75% 100%);
  /* cut out the middle */
  mask: radial-gradient(circle, transparent 55%, #000 56%);
}
```

Een donutdiagram in één element. Verander de percentages om de segmenten te veranderen.

### Metaal en glans

Geborsteld staal, een vinylplaat en een satijnen knop weerkaatsen allemaal licht in wiggen rond hun midden. Afwisselend licht en donker grijs rond een conic gradient bootst dat na. Gebruik vier tot zes wisselingen; minder lijkt op een strandbal, meer op een diagram. Geef het grijs een lichte warme tint voor goud of messing en een lichtblauwe tint voor chroom.

### Stralen en bursts

Zet het middelpunt boven of buiten het beeld en een smalle heldere wig wordt een spotlight of een lichtbundel door een raam. Een herhalende conic gradient met afwisselende wiggen wordt een zonnestraal, het retro-instrument van de uitverkoopposter. Houd bursts achter een grote, eenvoudige kop; ze zijn op zichzelf luid.

### Iriserend effect

Echt iriseren verschuift van tint met de kijkhoek. Een zachte conic draai van pastels, met het middelpunt opzij, komt verrassend dichtbij. Het is de basis van de meeste [holografische kleurverlopen](https://gradiently.design/nl/guide/holographic-gradients).

## Conic, radiaal of lineair

| Type | Kleur verandert met | Het best voor |
| --- | --- | --- |
| Lineair | Afstand langs een lijn | Luchten, licht van één kant, eenvoudige merkvlakken |
| Radiaal | Afstand tot een middelpunt | Spotlights, gloed, vignetten |
| Conic | Hoek rond een middelpunt | Wielen, diagrammen, glans, stralen, bursts |

Elk type beantwoordt een andere vraag over waar kleur verandert.

Twijfel je, vraag dan wat het licht in je beeld doet. Licht dat over een oppervlak valt is lineair. Licht dat uit een bron komt is [radiaal](https://gradiently.design/nl/guide/radial-gradient). Licht dat weerkaatst van iets draaiends of gebogens is conic. [Soorten kleurverlopen](https://gradiently.design/nl/guide/types-of-gradients) toont ze allemaal naast elkaar.

## Conic gradients goed doen

1. **Bepaal waar het middelpunt komt** Een gecentreerde conic gradient lijkt op een diagram of wiel. Het middelpunt naar een hoek of buiten het beeld verplaatsen maakt er licht en glans van.
2. **Sluit de cirkel** Herhaal de eerste kleur aan het eind, tenzij je een zichtbare naad wilt. Harde naden zijn alleen voor diagrammen en bursts.
3. **Verberg of verzacht het punt** Elke conic gradient knijpt samen tot een scherp punt in het midden. Zet er een logo, een cirkel of de rand van het beeld overheen, of vervaag de laag.
4. **Gebruik een starthoek** De start roteren met `from` verplaatst waar de helderste wig valt, en dat is vaak alles wat een compositie nodig heeft.
5. **Combineer met andere typen** Een subtiele conic glans over een lineaire of radiale basis geeft een gevoel van materiaal zonder de aandacht naar zich toe te trekken.

### Vermijden

- Een regenboogwiel als achtergrond achter tekst
- Een scherp middelpunt dat in het zicht ligt
- Een naad waar de laatste kleur niet bij de eerste past
- Diagrammen waar kleur de enige manier is om segmenten te onderscheiden

### Doen

- Korte, verwante kleurbogen voor oppervlakken
- Het middelpunt verborgen achter een voorwerp of buiten het canvas
- De eerste kleur herhaald aan het eind
- Labels of patronen naast diagramkleuren

Conic gradients maken ook patronen: een herhalende versie met vier harde kwarten tekent een dambord in één regel. [CSS-patronen](https://gradiently.design/nl/guide/css-patterns) behandelt die.

## FAQ

### Wat is een conic gradient?

Een conic gradient verandert van kleur terwijl hij rond een middelpunt draait, dus zijn kleurstops worden bepaald door hoek in plaats van afstand.

### Is een conic gradient hetzelfde als een angular gradient?

Ja. Figma en verschillende andere ontwerptools noemen het een angular gradient; CSS noemt het een conic gradient.

### Hoe maak ik een cirkeldiagram met een conic gradient?

Geef elke kleur een begin- en eindpositie met harde stops, bijvoorbeeld violet van 0% tot 45% en roze van 45% tot 75%. Voeg labels toe zodat het diagram niet alleen op kleur leunt.

### Waarom zit er een lijn bovenaan mijn conic gradient?

De draai begint en eindigt op dezelfde hoek. Verschilt de laatste kleur van de eerste, dan verschijnt daar een naad; herhaal de eerste kleur aan het eind om hem weg te halen.