# CSS conic gradient: hjul, kakediagrammer og glans

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

conic-gradient() sveiper farge rundt et punkt som viseren på en klokke. Den ene ideen tegner fargehjul, kakediagrammer, smultringdiagrammer, metallglans og stjerneutbrudd.

## The short version

- En konisk gradient i CSS plasserer farger rundt et sentrum og sveiper med klokka fra toppen, i stedet for langs en linje eller utover i ringer.
- Fargestopp i en konisk gradient bruker vinkler eller prosenter av en full omdreining, så 25 % og 90deg betyr samme posisjon.
- Harde stopp gjør en konisk gradient til stykker, som er den raskeste måten å tegne et kakediagram i CSS på.
- Nøkkelordet from roterer hvor sveipet starter, og at flytter sentrum.
- repeating-conic-gradient() gjentar stoppene rundt sirkelen og tegner sjakkbrett og stjerneutbrudd sammen med background-size.

En **konisk gradient i CSS** sveiper farge rundt et sentrum, slik en klokkeviser sveiper rundt skiven. Der en lineær gradient endrer seg langs en linje og en radiell gradient endrer seg utover fra sentrum, endrer `conic-gradient()` seg med vinkelen. Den starter øverst, går med klokka og kan brukes overalt CSS tar et bilde. Det gjør den til det naturlige verktøyet for fargehjul, kakediagrammer, lasteringer og de vinkelrette høylysene i børstet metall.

Et enkelt fargehjul: `conic-gradient(#ef4444, #eab308, #22c55e, #06b6d4, #3b82f6, #a855f7, #ef4444)`

Sju stopp, jevnt fordelt rundt en full omdreining. Å gjenta den første fargen på slutten lukker sømmen øverst.

Velger du mellom gradienttyper til et design i stedet for å lære syntaksen, er [typer gradienter](https://gradiently.design/nb/guide/types-of-gradients) og designguiden om [koniske gradienter](https://gradiently.design/nb/guide/conic-gradient) bedre utgangspunkt.

## Syntaksen til 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%)
```

Alt før det første kommaet er valgfritt. Begge stopplistene på de to siste linjene tegner det samme kvartstykket.

| Del | Eksempel | Standard |
| --- | --- | --- |
| Startvinkel | `from 45deg` | `from 0deg`, rett opp |
| Sentrum | `at 30% 50%`, `at top left` | `at center` |
| Interpolasjon | `in oklch`, `in hsl longer hue` | sRGB for hex-farger |
| Stoppposisjon | `90deg`, `0.25turn`, `25%` | jevnt fordelt rundt omdreiningen |

Delene av conic-gradient(). Stoppposisjoner måles rundt sirkelen, ikke langs en linje.

Vinkler går med klokka fra toppen: `90deg` er klokka tre, `180deg` er klokka seks. Hele definisjonen står på [MDNs side om conic-gradient()](https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/conic-gradient). Nettleserstøtten har vært universell i gjeldende Chrome, Edge, Safari og Firefox i årevis, så prefikser trengs ikke.

## Å rotere og flytte sveipet

`from` roterer hele gradienten, noe som er nyttig når sømmen mellom første og siste farge ellers ville havnet øverst. `at` flytter sentrum. Flytter du det til et hjørne, blir hjulet til en vifte av stråler, og flytter du det helt utenfor boksen, får du en mild vinklet strøk som ikke ligner et hjul i det hele tatt.

- from 0deg, sentrert: `conic-gradient(from 0deg, #1e1b4b, #7c3aed, #f472b6, #1e1b4b)`
- from 180deg: søm nederst: `conic-gradient(from 180deg, #1e1b4b, #7c3aed, #f472b6, #1e1b4b)`
- at 0% 100%: vifte fra hjørnet: `conic-gradient(at 0% 100%, #1e1b4b, #7c3aed 30deg, #f472b6 60deg, #fde68a 90deg)`

Den samme familien av indigo, fiolett og rosa, rotert og flyttet. I hjørneversjonen fyller en kvart omdreining boksen.

## Kake- og smultringdiagrammer i CSS

Gi hvert stykke en start og en slutt, og la hvert begynne der det forrige sluttet. Å skrive `0` som andre stoppposisjon er en snarvei: en posisjon som er mindre enn den forrige, klemmes til den, så den nye fargen starter nøyaktig der den siste endte. Runde av elementet med `border-radius: 50%`, og klipp et hull med en radiell maske for å gjøre kaken til en smultring.

```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%);
}
```

En kake med fire stykker, og den ene linjen som gjør den til en smultring. Bruk egendefinerte egenskaper til prosentene hvis dataene endres.

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

Kakens bakgrunn alene. På et rundt element leses den som et diagram.

> **Diagrammer trenger ekte tekst også** En gradient er et bilde, så skjermlesere kan ikke lese verdiene. Sett tallene i tekst eller en tabell ved siden av diagrammet, eller gi elementet `role="img"` og en `aria-label` som oppgir dem.

Harde kanter i koniske gradienter kan se litt hakkete ut langs stykkelinjene i noen nettlesere. Hvis det plager deg, la det være en brøkdel av en grad mellom stoppene, for eksempel `#6366f1 0 39.8%, #22d3ee 40.2% 65%`, så kanten får et hårstrå av blanding.

## Fargehjul med fargetoneinterpolasjon

Et fargehjul trenger vanligvis seks eller sju stopp. Med interpolasjonsmetoder kan du be nettleseren om å gå fargetonesirkelen selv. `longer hue` tar den lange veien rundt mellom to fargetoner, og når begge stoppene har samme farge, er den lange veien hele sirkelen, så to røde gir et fullt spektrum.

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

Én farge, to ganger, og en full regnbue imellom. [OKLCH-gradienter](https://gradiently.design/nb/guide/css-gradient-oklch) forklarer shorter og longer hue.

## Metallglans og høylys

Ekte børstet metall og polerte skiver fanger lys i vinkelbånd, og det er nøyaktig det en konisk gradient tegner. Veksle noen lyse og mørke gråtoner med ujevn avstand, så leses flaten som metall. Lagt lag på lag med lav dekning over en farge gir det samme trikset glans til knapper og kort. Se [gradientknapper](https://gradiently.design/nb/guide/css-gradient-button) for et gjennomarbeidet eksempel.

- Børstet stål: `conic-gradient(from 20deg, #9ca3af, #f9fafb 12%, #6b7280 30%, #e5e7eb 48%, #4b5563 62%, #f3f4f6 80%, #9ca3af)`
- Gullskive: `conic-gradient(from 200deg, #92400e, #fde68a 15%, #b45309 35%, #fef3c7 55%, #78350f 75%, #92400e)`

Ujevne lyse og mørke bånd sveipet rundt sentrum leses som polert metall.

## Repeterende koniske gradienter til mønstre

`repeating-conic-gradient()` gjentar stopplisten rundt omdreiningen. Korte stopp med harde kanter gir stjerneutbrudd. Sammen med `background-size` legges et kvartmønster i to farger som fliser til et sjakkbrett, et mønster som ellers er tungvint å tegne med gradienter. Mer i [CSS-mønstre](https://gradiently.design/nb/guide/css-patterns).

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

Korte harde stopp gjentatt hele veien rundt.

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

Et sjakkbrett på 16 piksler: det klassiske gjennomsiktighetsrutenettet bak bilderedigerere.

## FAQ

### Hva er en konisk gradient i CSS?

Det er en gradient der fargene endrer seg med vinkelen rundt et sentrum, fra toppen og med klokka, skrevet med `conic-gradient()`.

### Hvordan lager jeg et kakediagram med CSS?

Bruk harde stopp i en konisk gradient, for eksempel `conic-gradient(#6366f1 0 40%, #22d3ee 0 65%, #e2e8f0 0)`, på et element med `border-radius: 50%`. Sett også verdiene i tekst for skjermlesere.

### Hvordan roterer jeg en konisk gradient?

Legg til `from` og en vinkel som første argument, for eksempel `conic-gradient(from 90deg, ...)`. Sveipet starter da klokka tre i stedet for øverst.

### Hvorfor er kantene på den koniske gradienten min hakkete?

Harde stopp har ingen blanding, og noen nettlesere tegner grensen uten utjevning. Å la det være en brøkdel av en grad mellom nabostopp mykner den.

### Fungerer koniske gradienter i alle nettlesere?

Ja, gjeldende versjoner av Chrome, Edge, Safari og Firefox støtter `conic-gradient()` og `repeating-conic-gradient()` uten prefikser.