# CSS conic gradient: wielen, cirkeldiagrammen en glans

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

conic-gradient() laat kleur rond een punt draaien als de wijzer van een klok. Dat ene idee tekent kleurenwielen, cirkel- en donutdiagrammen, metaalglans en sterrenbursts.

## The short version

- Een CSS conic gradient plaatst kleuren rond een middelpunt, met de klok mee vanaf de bovenkant, in plaats van langs een lijn of in ringen naar buiten.
- Kleurstops in een conic gradient gebruiken hoeken of percentages van een volledige draai, dus 25% en 90deg betekenen dezelfde positie.
- Harde stops maken van een conic gradient segmenten, de snelste manier om in CSS een cirkeldiagram te tekenen.
- Het sleutelwoord from roteert waar de draai begint en at verplaatst het middelpunt.
- repeating-conic-gradient() herhaalt zijn stops rond de cirkel en tekent, gecombineerd met background-size, dambordpatronen en sterrenbursts.

Een **CSS conic gradient** laat kleur rond een middelpunt draaien, zoals een klokwijzer over zijn wijzerplaat gaat. Waar een lineair kleurverloop langs een lijn verandert en een radiaal kleurverloop naar buiten vanuit het midden, verandert `conic-gradient()` met de hoek. Hij begint bovenaan, loopt met de klok mee en wordt gebruikt overal waar CSS een afbeelding accepteert. Dat maakt hem het natuurlijke gereedschap voor kleurenwielen, cirkeldiagrammen, laadringen en de hoekige highlights van geborsteld metaal.

Een eenvoudig kleurenwiel: `conic-gradient(#ef4444, #eab308, #22c55e, #06b6d4, #3b82f6, #a855f7, #ef4444)`

Zeven stops, gelijkmatig verdeeld over een volledige draai. De eerste kleur aan het eind herhalen sluit de naad bovenaan.

Kies je tussen soorten kleurverlopen voor een ontwerp in plaats van de syntaxis te leren, dan zijn [soorten kleurverlopen](https://gradiently.design/nl/guide/types-of-gradients) en de ontwerpgids over [conic gradients](https://gradiently.design/nl/guide/conic-gradient) betere beginpunten.

## De syntaxis van conic-gradient()

```css
/*               start angle   centre        stops */
conic-gradient(from 90deg at 30% 50%, #0ea5e9, #6366f1, #0ea5e9)

/* stops as angles or as percentages of the turn */
conic-gradient(#f59e0b 0deg 90deg, #1e293b 90deg)
conic-gradient(#f59e0b 0% 25%, #1e293b 25%)
```

Alles voor de eerste komma is optioneel. Beide stoplijsten op de laatste twee regels tekenen hetzelfde kwartsegment.

| Onderdeel | Voorbeeld | Standaard |
| --- | --- | --- |
| Starthoek | `from 45deg` | `from 0deg`, recht omhoog |
| Middelpunt | `at 30% 50%`, `at top left` | `at center` |
| Interpolatie | `in oklch`, `in hsl longer hue` | sRGB voor hexkleuren |
| Stoppositie | `90deg`, `0.25turn`, `25%` | gelijkmatig verdeeld over de draai |

De onderdelen van conic-gradient(). Stoposities meten rond de cirkel, niet langs een lijn.

Hoeken lopen met de klok mee vanaf de bovenkant: `90deg` is drie uur, `180deg` is zes. De volledige definitie staat op de [conic-gradient()-pagina van MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/conic-gradient). Browserondersteuning is al jaren universeel in de huidige Chrome, Edge, Safari en Firefox, dus voorvoegsels zijn niet nodig.

## De draai roteren en verplaatsen

`from` roteert het hele kleurverloop, handig als de naad tussen de eerste en laatste kleur anders bovenaan zou zitten. `at` verplaatst het middelpunt. Naar een hoek verplaatst wordt het wiel een waaier van stralen, en helemaal buiten het vak verplaatst geeft het een zachte schuine wassing die niets meer op een wiel lijkt.

- from 0deg, gecentreerd: `conic-gradient(from 0deg, #1e1b4b, #7c3aed, #f472b6, #1e1b4b)`
- from 180deg: naad onderaan: `conic-gradient(from 180deg, #1e1b4b, #7c3aed, #f472b6, #1e1b4b)`
- at 0% 100%: een waaier vanuit de hoek: `conic-gradient(at 0% 100%, #1e1b4b, #7c3aed 30deg, #f472b6 60deg, #fde68a 90deg)`

Dezelfde familie van indigo, violet en roze, geroteerd en verplaatst. In de hoekversie vult een kwartslag het vak.

## Cirkel- en donutdiagrammen in CSS

Geef elk segment een begin en een eind en laat elk beginnen waar het vorige eindigde. `0` schrijven als tweede stoppositie is een sluiproute: een positie kleiner dan de vorige wordt eraan vastgezet, dus de nieuwe kleur begint precies waar de vorige eindigde. Rond het element af met `border-radius: 50%` en knip een gat met een radiaal masker om van de taart een donut te maken.

```css
.pie {
  width: 12rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(
    #6366f1 0 40%,   /* 40% */
    #22d3ee 0 65%,   /* 25% */
    #f59e0b 0 85%,   /* 20% */
    #e2e8f0 0        /* the rest, 15% */
  );
}

.donut {
  /* same background as .pie, then a hole */
  mask: radial-gradient(farthest-side, transparent 58%, #000 59%);
}
```

Een taart met vier segmenten, en de ene regel die er een donut van maakt. Gebruik aangepaste eigenschappen voor de percentages als de data verandert.

Taartsegmenten: 40, 25, 20 en 15%: `conic-gradient(#6366f1 0 40%, #22d3ee 0 65%, #f59e0b 0 85%, #e2e8f0 0)`

De achtergrond van de taart op zichzelf. Op een rond element leest hij als een diagram.

> **Diagrammen hebben ook echte tekst nodig** Een kleurverloop is een afbeelding, dus schermlezers kunnen zijn waarden niet lezen. Zet de getallen in tekst of een tabel naast het diagram, of geef het element `role="img"` en een `aria-label` dat ze noemt.

Harde randen in conic gradients kunnen in sommige browsers iets gekarteld lijken langs de segmentlijnen. Stoort het je, laat dan een fractie van een graad tussen stops, zoals `#6366f1 0 39.8%, #22d3ee 40.2% 65%`, zodat de rand een haartje menging krijgt.

## Kleurenwielen met tintinterpolatie

Een kleurenwiel heeft meestal zes of zeven stops nodig. Met interpolatiemethoden kun je de browser zelf de tintencirkel laten afleggen. `longer hue` neemt de lange weg tussen twee tinten, en als beide stops dezelfde kleur zijn is de lange weg de hele cirkel, dus twee keer rood geeft een volledig spectrum.

```css
.wheel {
  border-radius: 50%;
  background: conic-gradient(in hsl longer hue, #ff0000, #ff0000);
}
```

Eén kleur, twee keer, en een volledige regenboog ertussen. [OKLCH-kleurverlopen](https://gradiently.design/nl/guide/css-gradient-oklch) leggen kortere en langere tint uit.

## Metaalglans en highlights

Echt geborsteld metaal en gepolijste schijven vangen licht in hoekige banden, precies wat een conic gradient tekent. Wissel enkele lichte en donkere grijstinten af, met ongelijke tussenruimten, en het oppervlak leest als metaal. Met lage dekking over een kleur gelegd geeft hetzelfde trucje glans aan knoppen en kaarten; zie [kleurverloopknoppen](https://gradiently.design/nl/guide/css-gradient-button) voor een uitgewerkt voorbeeld.

- Geborsteld staal: `conic-gradient(from 20deg, #9ca3af, #f9fafb 12%, #6b7280 30%, #e5e7eb 48%, #4b5563 62%, #f3f4f6 80%, #9ca3af)`
- Gouden schijf: `conic-gradient(from 200deg, #92400e, #fde68a 15%, #b45309 35%, #fef3c7 55%, #78350f 75%, #92400e)`

Ongelijke lichte en donkere banden rond het midden lezen als gepolijst metaal.

## Herhalende conic gradients voor patronen

`repeating-conic-gradient()` herhaalt zijn stoplijst rond de draai. Korte stops met harde randen geven sterrenbursts. Gecombineerd met `background-size` tegelt een tweekleurig kwartpatroon tot een dambord, een patroon dat anders lastig met kleurverlopen te tekenen is. Meer in [CSS-patronen](https://gradiently.design/nl/guide/css-patterns).

- Zonnestraal: `repeating-conic-gradient(#fbbf24 0 10deg, #f97316 10deg 20deg)`
- Nachtstralen: `repeating-conic-gradient(from 45deg at 50% 50%, #0f172a 0 15deg, #1e293b 15deg 30deg)`

Korte harde stops helemaal rond herhaald.

```css
.checkerboard {
  background: repeating-conic-gradient(#e2e8f0 0 25%, #ffffff 0 50%) 0 0 / 32px 32px;
}
```

Een dambord van 16 pixels: het klassieke transparantieraster achter beeldbewerkers.

## FAQ

### Wat is een conic gradient in CSS?

Het is een kleurverloop waarvan de kleuren veranderen met de hoek rond een middelpunt, beginnend bovenaan en met de klok mee, geschreven met `conic-gradient()`.

### Hoe maak ik een cirkeldiagram met CSS?

Gebruik harde stops in een conic gradient, zoals `conic-gradient(#6366f1 0 40%, #22d3ee 0 65%, #e2e8f0 0)`, op een element met `border-radius: 50%`. Zet de waarden ook in tekst voor schermlezers.

### Hoe roteer ik een conic gradient?

Voeg `from` en een hoek toe als eerste argument, bijvoorbeeld `conic-gradient(from 90deg, ...)`. De draai begint dan bij drie uur in plaats van bovenaan.

### Waarom zijn de randen van mijn conic gradient gekarteld?

Harde stops hebben geen menging, en sommige browsers tekenen de grens zonder afvlakking. Een fractie van een graad tussen naburige stops verzacht het.

### Werken conic gradients in alle browsers?

Ja, huidige versies van Chrome, Edge, Safari en Firefox ondersteunen `conic-gradient()` en `repeating-conic-gradient()` zonder voorvoegsels.