# CSS konisk gradient: cirklar, cirkeldiagram och glans

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

conic-gradient() sveper färg runt en punkt som visaren på en klocka. Den enda idén ritar färgcirklar, cirkeldiagram, ringdiagram, metallglans och strålkransar.

## The short version

- En konisk gradient i CSS placerar färger runt en mittpunkt och sveper medsols från toppen, i stället för längs en linje eller utåt i ringar.
- Färgstopp i en konisk gradient använder vinklar eller procent av ett helt varv, så 25 % och 90deg betyder samma position.
- Hårda stopp förvandlar en konisk gradient till sektorer, vilket är det snabbaste sättet att rita ett cirkeldiagram i CSS.
- Nyckelordet from roterar var svepet börjar och at flyttar mittpunkten.
- repeating-conic-gradient() upprepar sina stopp runt cirkeln och ritar, i kombination med background-size, schackrutor och strålkransar.

En **konisk gradient i CSS** sveper färg runt en mittpunkt, som en klockvisare sveper runt urtavlan. Där en linjär gradient ändras längs en linje och en radiell gradient ändras utåt från mitten ändras `conic-gradient()` med vinkeln. Den börjar överst, går medsols och kan användas överallt där CSS tar en bild. Det gör den till det naturliga verktyget för färgcirklar, cirkeldiagram, laddningsringar och de vinkelformade högdagrarna på borstad metall.

En enkel färgcirkel: `conic-gradient(#ef4444, #eab308, #22c55e, #06b6d4, #3b82f6, #a855f7, #ef4444)`

Sju stopp, jämnt fördelade runt ett helt varv. Att upprepa den första färgen i slutet sluter sömmen överst.

Om du väljer mellan gradienttyper för en design snarare än att lära dig syntaxen är [typer av gradienter](https://gradiently.design/sv/guide/types-of-gradients) och designguiden om [koniska gradienter](https://gradiently.design/sv/guide/conic-gradient) bättre startpunkter.

## Syntaxen för 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%)
```

Allt före det första kommatecknet är valfritt. Båda stopplistorna på de två sista raderna ritar samma kvartssektor.

| Del | Exempel | Standard |
| --- | --- | --- |
| Startvinkel | `from 45deg` | `from 0deg`, rakt uppåt |
| Mittpunkt | `at 30% 50%`, `at top left` | `at center` |
| Interpolering | `in oklch`, `in hsl longer hue` | sRGB för hexfärger |
| Stoppposition | `90deg`, `0.25turn`, `25%` | jämnt fördelad runt varvet |

Delarna i conic-gradient(). Stoppositioner mäts runt cirkeln, inte längs en linje.

Vinklar löper medsols från toppen: `90deg` är klockan tre, `180deg` är klockan sex. Hela definitionen finns på [MDN:s sida om conic-gradient()](https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/conic-gradient). Webbläsarstödet har i åratal varit universellt i nuvarande Chrome, Edge, Safari och Firefox, så inga prefix behövs.

## Att rotera och flytta svepet

`from` roterar hela gradienten, vilket är praktiskt när sömmen mellan den första och sista färgen annars skulle hamna överst. `at` flyttar mittpunkten. Flyttar du den till ett hörn blir cirkeln en solfjäder av strålar, och flyttar du den helt utanför rutan får du en mjuk, vinklad tvätt som inte alls liknar en cirkel.

- from 0deg, centrerad: `conic-gradient(from 0deg, #1e1b4b, #7c3aed, #f472b6, #1e1b4b)`
- from 180deg: söm längst ned: `conic-gradient(from 180deg, #1e1b4b, #7c3aed, #f472b6, #1e1b4b)`
- at 0% 100%: solfjäder från hörnet: `conic-gradient(at 0% 100%, #1e1b4b, #7c3aed 30deg, #f472b6 60deg, #fde68a 90deg)`

Samma familj av indigo, violett och rosa, roterad och flyttad. I hörnversionen fyller ett kvarts varv rutan.

## Cirkeldiagram och ringdiagram i CSS

Ge varje sektor en start och ett slut, och låt varje börja där den förra slutade. Att skriva `0` som andra stoppositionen är en genväg: en position som är mindre än den föregående fastnar på den, så den nya färgen börjar exakt där den förra slutade. Runda av elementet med `border-radius: 50%` och skär ut ett hål med en radiell mask för att göra cirkeln till en ring.

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

Ett cirkeldiagram med fyra sektorer och raden som gör det till ett ringdiagram. Använd egna egenskaper för procenttalen om datan ändras.

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

Cirkeldiagrammets bakgrund för sig. På ett runt element läses den som ett diagram.

> **Diagram behöver riktig text också** En gradient är en bild, så skärmläsare kan inte läsa dess värden. Lägg talen i text eller en tabell bredvid diagrammet, eller ge elementet `role="img"` och en `aria-label` som anger dem.

Hårda kanter i koniska gradienter kan se lite hackiga ut längs sektorlinjerna i vissa webbläsare. Om det stör dig kan du lämna en bråkdels grad mellan stoppen, som `#6366f1 0 39.8%, #22d3ee 40.2% 65%`, så att kanten får ett hår av blandning.

## Färgcirklar med nyansinterpolering

En färgcirkel behöver oftast sex eller sju stopp. Med interpoleringsmetoder kan du be webbläsaren själv färdas runt nyanscirkeln. `longer hue` tar den långa vägen runt mellan två nyanser, och när båda stoppen har samma färg är den långa vägen hela cirkeln, så två röda ger ett helt spektrum.

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

En färg, två gånger, och en hel regnbåge däremellan. [OKLCH-gradienter](https://gradiently.design/sv/guide/css-gradient-oklch) förklarar kortare och längre nyans.

## Metallglans och högdagrar

Riktig borstad metall och polerade skivor fångar ljus i vinkelformade band, vilket är precis vad en konisk gradient ritar. Växla några ljusa och mörka gråtoner, ojämnt fördelade, så läses ytan som metall. Lagd med låg opacitet över en färg ger samma trick glans åt knappar och kort. Se [gradientknappar](https://gradiently.design/sv/guide/css-gradient-button) för ett genomarbetat exempel.

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

Ojämna ljusa och mörka band som sveper runt mitten läses som polerad metall.

## Upprepade koniska gradienter för mönster

`repeating-conic-gradient()` upprepar sin stopplista runt varvet. Korta stopp med hårda kanter ger strålkransar. Tillsammans med `background-size` bildar ett tvåfärgat kvartsmönster en schackruta, ett mönster som annars är krångligt att rita med gradienter. Mer i [CSS-mönster](https://gradiently.design/sv/guide/css-patterns).

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

Korta hårda stopp upprepade hela vägen runt.

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

En schackruta på 16 pixlar: det klassiska genomskinlighetsrutnätet bakom bildredigerare.

## FAQ

### Vad är en konisk gradient i CSS?

Det är en gradient vars färger ändras med vinkeln runt en mittpunkt, med start överst och rörelse medsols, skriven med `conic-gradient()`.

### Hur gör jag ett cirkeldiagram med CSS?

Använd hårda stopp i en konisk gradient, som `conic-gradient(#6366f1 0 40%, #22d3ee 0 65%, #e2e8f0 0)`, på ett element med `border-radius: 50%`. Lägg också värdena i text för skärmläsare.

### Hur roterar jag en konisk gradient?

Lägg till `from` och en vinkel som första argument, till exempel `conic-gradient(from 90deg, ...)`. Svepet börjar då klockan tre i stället för överst.

### Varför är kanterna på min koniska gradient hackiga?

Hårda stopp har ingen blandning, och vissa webbläsare ritar gränsen utan utjämning. Om du lämnar en bråkdels grad mellan intilliggande stopp mjukas den upp.

### Fungerar koniska gradienter i alla webbläsare?

Ja, nuvarande versioner av Chrome, Edge, Safari och Firefox stöder `conic-gradient()` och `repeating-conic-gradient()` utan prefix.