# CSS conic gradient: hjul, lagkagediagrammer og glans

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

conic-gradient() fejer farve rundt om et punkt som viseren på et ur. Den ene idé tegner farvehjul, lagkage- og donutdiagrammer, metallisk glans og stjernesprængninger.

## The short version

- En CSS conic gradient placerer farver rundt om et midtpunkt og fejer med uret fra toppen i stedet for langs en linje eller udad i ringe.
- Farvestop i en conic gradient bruger vinkler eller procenter af en hel omdrejning, så 25 % og 90deg er den samme position.
- Hårde stop gør en conic gradient til udsnit, hvilket er den hurtigste måde at tegne et lagkagediagram i CSS.
- Nøgleordet from roterer, hvor fejningen starter, og at flytter midtpunktet.
- repeating-conic-gradient() gentager sine stop rundt om cirklen og tegner sammen med background-size skakternede mønstre og stjernesprængninger.

En **CSS conic gradient** fejer farve rundt om et midtpunkt, som en urviser fejer rundt om skiven. Hvor en lineær gradient skifter langs en linje, og en radial gradient skifter udad fra midten, skifter `conic-gradient()` med vinklen. Den starter øverst, løber med uret og bruges overalt, hvor CSS tager et billede. Det gør den til det naturlige værktøj til farvehjul, lagkagediagrammer, indlæsningsringe og de vinklede højlys i børstet metal.

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

Syv stop, jævnt fordelt over en hel omdrejning. At gentage den første farve til sidst lukker sømmen øverst.

Vælger du mellem gradienttyper til et design frem for at lære syntaksen, er [gradienttyper](https://gradiently.design/da/guide/types-of-gradients) og designguiden til [koniske gradienter](https://gradiently.design/da/guide/conic-gradient) bedre udgangspunkter.

## Syntaksen for 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 komma er valgfrit. Begge stoplister på de to sidste linjer tegner det samme kvartudsnit.

| Del | Eksempel | Standard |
| --- | --- | --- |
| Startvinkel | `from 45deg` | `from 0deg`, lige op |
| Centrum | `at 30% 50%`, `at top left` | `at center` |
| Interpolation | `in oklch`, `in hsl longer hue` | sRGB til hexfarver |
| Stopposition | `90deg`, `0.25turn`, `25%` | fordelt jævnt rundt om omdrejningen |

Delene i conic-gradient(). Stoppositioner måles rundt om cirklen og ikke langs en linje.

Vinkler løber med uret fra toppen: `90deg` er klokken tre, `180deg` er klokken seks. Den fulde definition står på [MDN’s side om conic-gradient()](https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/conic-gradient). Understøttelsen har i årevis været universel i nuværende Chrome, Edge, Safari og Firefox, så du behøver ingen præfikser.

## Sådan roterer og flytter du fejningen

`from` roterer hele gradienten, hvilket er praktisk, når sømmen mellem første og sidste farve ellers ville ligge øverst. `at` flytter centrum. Flytter du det til et hjørne, bliver hjulet til en vifte af stråler, og flytter du det helt uden for boksen, får du en blød, vinklet vask, der slet ikke ligner et hjul.

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

Den samme familie af indigo, violet og pink, roteret og flyttet. I hjørneversionen fylder en kvart omdrejning boksen ud.

## Lagkage- og donutdiagrammer i CSS

Giv hvert udsnit en start og en slutning, og lad hvert starte, hvor det forrige sluttede. At skrive `0` som den anden stopposition er en genvej: en position, der er mindre end den forrige, sættes til den, så den nye farve starter præcis, hvor den sidste sluttede. Rund elementet med `border-radius: 50%`, og skær et hul med en radial maske, så bliver lagkagen til en donut.

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

Et lagkagediagram med fire udsnit og den ene linje, der gør det til en donut. Brug brugerdefinerede egenskaber til procenterne, hvis dataene ændrer sig.

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

Lagkagens baggrund alene. På et rundt element læses den som et diagram.

> **Diagrammer skal også have rigtig tekst** En gradient er et billede, så skærmlæsere kan ikke læse dens værdier. Sæt tallene i tekst eller en tabel ved siden af diagrammet, eller giv elementet `role="img"` og en `aria-label`, der nævner dem.

Hårde kanter i koniske gradienter kan se en anelse takkede ud langs udsnitslinjerne i nogle browsere. Generer det dig, så lad en brøkdel af en grad ligge mellem stoppene, som `#6366f1 0 39.8%, #22d3ee 40.2% 65%`, så kanten får et hår af blanding.

## Farvehjul med farvetoneinterpolation

Et farvehjul har normalt brug for seks eller syv stop. Med interpolationsmetoder kan du bede browseren om selv at rejse rundt om farvetonecirklen. `longer hue` tager den lange vej rundt mellem to farvetoner, og når begge stop er den samme farve, er den lange vej hele cirklen, så to røde giver et helt spektrum.

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

Én farve, to gange, og en hel regnbue imellem. [OKLCH-gradienter](https://gradiently.design/da/guide/css-gradient-oklch) forklarer kortere og længere farvetone.

## Metallisk glans og højlys

Ægte børstet metal og polerede skiver fanger lys i vinklede bånd, hvilket er præcis det, en conic gradient tegner. Skift mellem nogle få lyse og mørke grå toner med ujævn afstand, så læses fladen som metal. Lagt med lav opacity oven på en farve giver det samme trick glans til knapper og kort. Se [gradientknapper](https://gradiently.design/da/guide/css-gradient-button) for et gennemarbejdet eksempel.

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

Ujævne lyse og mørke bånd fejet rundt om midten læses som poleret metal.

## Gentagende koniske gradienter til mønstre

`repeating-conic-gradient()` gentager sin stopliste rundt om omdrejningen. Korte stop med hårde kanter giver stjernesprængninger. Sammen med `background-size` bliver et tofarvet kvartmønster til et skakternet mønster, som ellers er akavet at tegne med gradienter. Mere i [CSS-mønstre](https://gradiently.design/da/guide/css-patterns).

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

Korte hårde stop gentaget hele vejen rundt.

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

Et skakternet mønster på 16 pixel: det klassiske gennemsigtighedsgitter bag billededitorer.

## FAQ

### Hvad er en conic gradient i CSS?

Det er en gradient, hvis farver skifter med vinklen rundt om et midtpunkt, fra toppen og med uret, skrevet med `conic-gradient()`.

### Hvordan laver jeg et lagkagediagram med CSS?

Brug hårde stop i en conic gradient, som `conic-gradient(#6366f1 0 40%, #22d3ee 0 65%, #e2e8f0 0)`, på et element med `border-radius: 50%`. Sæt også værdierne i tekst til skærmlæsere.

### Hvordan roterer jeg en conic gradient?

Tilføj `from` og en vinkel som første argument, for eksempel `conic-gradient(from 90deg, ...)`. Fejningen starter så ved klokken tre i stedet for øverst.

### Hvorfor er kanterne på min conic gradient takkede?

Hårde stop har ingen blanding, og nogle browsere tegner grænsen uden udjævning. En brøkdel af en grad mellem nabostop blødgør den.

### Virker conic gradients i alle browsere?

Ja, nuværende versioner af Chrome, Edge, Safari og Firefox understøtter `conic-gradient()` og `repeating-conic-gradient()` uden præfikser.