# Koniska gradienter: färgcirklar, diagram och glans

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

Linjära gradienter förflyttar sig, radiella gradienter sprider sig och koniska gradienter vrider sig. Den enda skillnaden gör dem till rätt verktyg för cirklar, diagram, metall och ljusstrålar.

## The short version

- En konisk gradient ändrar färg när den roterar runt en mittpunkt, så dess stopp är vinklar snarare än avstånd.
- Koniska gradienter är det naturliga sättet att rita färgcirklar, cirkel- och ringdiagram, metallglans och ljusstrålar.
- Designverktyg kallar ofta samma sak för en vinkelgradient.
- Varje konisk gradient har en skarp punkt i mitten och en söm där cirkeln sluts, så båda behöver hanteras.
- En konisk gradient med hårda stopp blir ett diagram, och med mjuka stopp blir den en yta som verkar fånga ljus.

En **konisk gradient** ändrar färg när den sveper runt en mittpunkt, ungefär som visaren på en klocka rör sig runt urtavlan. En linjär gradient ändras längs en linje och en radiell gradient ändras när den rör sig utåt, men en konisk gradient ändras med vinkeln. Titta rakt ned på en kon målad i band och du skulle se samma sak, vilket är varifrån namnet kommer. Figma och en del andra verktyg kallar den en **vinkelgradient**.

Det vinkelbaserade beteendet gör koniska gradienter bra på sådant som andra gradienter inte klarar: färgcirklar, cirkeldiagram, borstad metall, strålkransar och ljusstrålar. Den här guiden går igenom var och en med levande exempel. Hela CSS-syntaxen finns i [CSS conic-gradient()](https://gradiently.design/sv/guide/css-conic-gradient).

## Så fungerar en konisk gradient

Du anger en mittpunkt, en startvinkel och en lista med färger med vinklar eller procent. Noll grader pekar uppåt och svepet går medsols. Där en färg slutar och nästa börjar finns ett stopp, precis som i andra gradienter, förutom att 25 % betyder ett kvarts varv, inte en fjärdedel av bredden.

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

En hel nyanscirkel. Den sista färgen upprepar den första så att cirkeln sluts utan söm.

Att den första färgen upprepas i slutet spelar roll. Om det sista stoppet skiljer sig från det första får du en hård linje rakt upp från mitten där svepet möter sin egen början. Guiden om [färgcirkeln](https://gradiently.design/sv/guide/color-wheel) förklarar hur du läser nyanserna på en cirkel som den här.

## Exempel på koniska gradienter för design

- Hårda stopp: diagramsektorer: `conic-gradient(#7c3aed 0% 45%, #f472b6 45% 75%, #fcd34d 75% 100%)`
- Glans som borstad metall: `conic-gradient(from 45deg at 50% 50%, #d4d4d8, #71717a, #f4f4f5, #52525b, #e4e4e7, #71717a, #d4d4d8)`
- Ljusstråle: `conic-gradient(from 160deg at 50% -10%, #0b0b14 0deg, #fde68a 20deg, #0b0b14 40deg)`
- Strålkrans: `repeating-conic-gradient(from 0deg at 50% 50%, #f97316 0deg 10deg, #fdba74 10deg 20deg)`
- Skimrande pastell: `conic-gradient(from 200deg at 60% 45%, #fbcfe8, #c7d2fe, #a5f3fc, #d9f99d, #fde68a, #fbcfe8)`
- Hörnsvep: `conic-gradient(from 0deg at 0% 100%, #0f172a 0deg, #1d4ed8 45deg, #67e8f9 90deg)`

Sex koniska gradienter. Hårda stopp ger diagram och strålkransar, mjuka stopp ger ytor och ljus.

### Cirkel- och ringdiagram

Ge varje färg en start- och slutvinkel så blir gradienten ett cirkeldiagram utan bild och utan diagrambibliotek. Lägg till en rund mask så blir det ett ringdiagram. Det passar enkel, dekorativ data i inlägg och presentationer. För riktig rapportering bör du lägga till etiketter, eftersom ett diagram som bara förlitar sig på färg sviker den som ser färg annorlunda.

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

Ett ringdiagram i ett enda element. Ändra procenttalen för att ändra sektorerna.

### Metall och glans

Borstat stål, en vinylskiva och en satinknapp reflekterar alla ljus i kilar runt sin mitt. Växlande ljusa och mörka gråtoner runt en konisk gradient imiterar det. Använd fyra till sex växlingar. Färre ser ut som en badboll, fler ser ut som ett diagram. Ge gråtonerna en svag varm ton för guld eller mässing och en svag blå ton för krom.

### Strålar och strålkransar

Placera mittpunkten ovanför eller utanför bilden så blir en smal, ljus kil en strålkastarstråle eller en ljusstråle genom ett fönster. En upprepande konisk gradient med växlande kilar blir en solstråleeffekt, retrogreppet från reaplakat. Håll strålkransar bakom en stor, enkel rubrik. De är högljudda nog som de är.

### Skimmer

Äkta skimmer ändrar nyans med betraktningsvinkeln. Ett mjukt koniskt svep av pasteller, med mittpunkten förskjuten åt ena sidan, kommer förvånansvärt nära. Det är basen i de flesta [holografiska gradienter](https://gradiently.design/sv/guide/holographic-gradients).

## Konisk, radiell eller linjär

| Typ | Färgen ändras med | Bäst för |
| --- | --- | --- |
| Linjär | Avstånd längs en linje | Himlar, ljus från ena sidan, enkla varumärkesytor |
| Radiell | Avstånd från en mittpunkt | Strålkastare, sken, vinjetter |
| Konisk | Vinkel runt en mittpunkt | Cirklar, diagram, glans, strålar, strålkransar |

Varje typ svarar på en annan fråga om var färgen ändras.

Om du är osäker kan du fråga vad ljuset i din bild gör. Ljus som faller över en yta är linjärt. Ljus som kommer från en källa är [radiellt](https://gradiently.design/sv/guide/radial-gradient). Ljus som reflekteras från något som snurrar eller är välvt är koniskt. [Typer av gradienter](https://gradiently.design/sv/guide/types-of-gradients) visar alla bredvid varandra.

## Så får du till koniska gradienter

1. **Bestäm var mittpunkten ska ligga** En centrerad konisk gradient ser ut som ett diagram eller en färgcirkel. Flyttar du mittpunkten till ett hörn eller utanför bilden blir den ljus och glans.
2. **Sluta cirkeln** Upprepa den första färgen i slutet om du inte vill ha en synlig söm. Hårda sömmar är bara till för diagram och strålkransar.
3. **Dölj eller mjuka upp punkten** Varje konisk gradient dras ihop till en skarp punkt i mitten. Lägg en logotyp, en cirkel eller bildens kant över den, eller sudda lagret.
4. **Använd en startvinkel** Om du roterar starten med `from` flyttas den ljusaste kilen, vilket ofta är allt en komposition behöver.
5. **Kombinera med andra typer** En subtil konisk glans över en linjär eller radiell botten ger en känsla av material utan att dra uppmärksamhet till sig.

### Undvik

- En regnbågscirkel som bakgrund bakom text
- En skarp mittpunkt i full sikt
- En söm där den sista färgen inte matchar den första
- Diagram där färg är det enda sättet att skilja sektorerna åt

### Gör så här

- Korta, besläktade färgbågar för ytor
- Mittpunkten dold bakom ett objekt eller utanför ytan
- Den första färgen upprepad i slutet
- Etiketter eller mönster vid sidan av diagramfärgerna

Koniska gradienter kan också göra mönster: en upprepande version med fyra hårda kvartar ritar ett schackbräde på en rad. [CSS-mönster](https://gradiently.design/sv/guide/css-patterns) tar upp dem.

## FAQ

### Vad är en konisk gradient?

En konisk gradient ändrar färg när den roterar runt en mittpunkt, så dess färgstopp anges med vinkel snarare än avstånd.

### Är en konisk gradient samma sak som en vinkelgradient?

Ja. Figma och flera andra designverktyg kallar den en vinkelgradient, CSS kallar den en konisk gradient.

### Hur gör jag ett cirkeldiagram med en konisk gradient?

Ge varje färg en start- och slutposition med hårda stopp, till exempel violett från 0 % till 45 % och rosa från 45 % till 75 %. Lägg till etiketter så att diagrammet inte bara beror på färg.

### Varför finns det en linje överst i min koniska gradient?

Svepet börjar och slutar i samma vinkel. Om den sista färgen skiljer sig från den första uppstår en söm där. Upprepa den första färgen i slutet för att ta bort den.