# Koniske gradienter: farvehjul, diagrammer og glans

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

Lineære gradienter bevæger sig, radiale gradienter spreder sig, og koniske gradienter drejer. Den ene forskel gør dem til det rette værktøj til hjul, diagrammer, metal og lysstråler.

## The short version

- En konisk gradient skifter farve, mens den roterer om et midtpunkt, så dens stop er vinkler og ikke afstande.
- Koniske gradienter er den naturlige måde at tegne farvehjul, lagkage- og donutdiagrammer, metallisk glans og lysstråler på.
- Designværktøjer kalder ofte det samme en vinkelgradient.
- Hver konisk gradient har et skarpt punkt i midten og en søm, hvor cirklen lukker sig, så begge skal håndteres.
- En konisk gradient med hårde stop bliver til et diagram, og med bløde stop bliver den til en flade, der ser ud til at fange lys.

En **konisk gradient** skifter farve, mens den fejer rundt om et midtpunkt, som viseren på et ur bevæger sig rundt om skiven. En lineær gradient skifter langs en linje, og en radial gradient skifter, mens den bevæger sig udad, men en konisk gradient skifter med vinklen. Kigger du lige ned på en kegle malet i bånd, ser du det samme, og det er derfra, navnet kommer. Figma og nogle andre værktøjer kalder den en **vinkelgradient**.

Den vinkelbaserede opførsel gør koniske gradienter gode til det, andre gradienter ikke kan: farvehjul, lagkagediagrammer, børstet metal, stjernesprængninger og lysstråler. Denne guide gennemgår hver med levende eksempler. Hele CSS-syntaksen står i [CSS conic-gradient()](https://gradiently.design/da/guide/css-conic-gradient).

## Sådan virker en konisk gradient

Du angiver et centrum, en startvinkel og en liste af farver med vinkler eller procenter. Nul grader peger opad, og fejningen går med uret. Hvor én farve slutter, og den næste begynder, er et stop, præcis som i andre gradienter, bortset fra at 25 % betyder en kvart omdrejning og ikke en fjerdedel af bredden.

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

En fuld farvetonecirkel. Den sidste farve gentager den første, så cirklen lukker uden en søm.

Den gentagelse af den første farve til sidst er vigtig. Er det sidste stop forskelligt fra det første, får du en hård linje lige op fra midten, hvor fejningen møder sin egen begyndelse. Guiden til [farvehjulet](https://gradiently.design/da/guide/color-wheel) forklarer, hvordan du læser farvetonerne på et hjul som dette.

## Eksempler på koniske gradienter til design

- Hårde stop: diagramudsnit: `conic-gradient(#7c3aed 0% 45%, #f472b6 45% 75%, #fcd34d 75% 100%)`
- Børstet metalglans: `conic-gradient(from 45deg at 50% 50%, #d4d4d8, #71717a, #f4f4f5, #52525b, #e4e4e7, #71717a, #d4d4d8)`
- Lysstråle: `conic-gradient(from 160deg at 50% -10%, #0b0b14 0deg, #fde68a 20deg, #0b0b14 40deg)`
- Stjernesprængning: `repeating-conic-gradient(from 0deg at 50% 50%, #f97316 0deg 10deg, #fdba74 10deg 20deg)`
- Iriserende pastel: `conic-gradient(from 200deg at 60% 45%, #fbcfe8, #c7d2fe, #a5f3fc, #d9f99d, #fde68a, #fbcfe8)`
- Fejning fra hjørnet: `conic-gradient(from 0deg at 0% 100%, #0f172a 0deg, #1d4ed8 45deg, #67e8f9 90deg)`

Seks koniske gradienter. Hårde stop giver diagrammer og sprængninger, bløde stop giver flader og lys.

### Lagkage- og donutdiagrammer

Giv hver farve en start- og slutvinkel, og gradienten bliver et lagkagediagram uden billede og uden diagrambibliotek. Tilføj en cirkulær maske, og det bliver en donut. Det passer til enkle, dekorative data i opslag og slides. Til rigtig rapportering skal du tilføje labels, for et diagram, der kun bygger på farve, svigter folk, der ser farver anderledes.

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

Et donutdiagram i ét element. Skift procenterne for at skifte udsnittene.

### Metal og glans

Børstet stål, en vinylplade og en satinknap reflekterer alle lys i kiler rundt om midten. Skiftende lyse og mørke grå toner rundt om en konisk gradient efterligner det. Brug fire til seks skift. Færre ligner en strandbold, flere ligner et diagram. Giv de grå toner et let varmt skær til guld eller messing og et let blåt til krom.

### Stråler og sprængninger

Placér centrum over eller uden for billedet, og en smal, lys kile bliver til en spotlysstråle eller en lysstribe gennem et vindue. En gentagende konisk gradient med skiftende kiler bliver til en solstråleeffekt, retrougtrykket på udsalgsplakater. Hold sprængninger bag en stor, enkel overskrift. De er højlydte i sig selv.

### Irisering

Ægte irisering skifter farvetone med betragtningsvinklen. En blød konisk fejning af pasteller med centrum flyttet til den ene side kommer overraskende tæt på. Den er grundlaget for de fleste [holografiske gradienter](https://gradiently.design/da/guide/holographic-gradients).

## Konisk, radial eller lineær

| Type | Farven skifter med | Bedst til |
| --- | --- | --- |
| Lineær | Afstand langs en linje | Himmel, lys fra den ene side, enkle brandflader |
| Radial | Afstand fra et centrum | Spotlys, glød, vignetter |
| Konisk | Vinkel rundt om et centrum | Hjul, diagrammer, glans, stråler, sprængninger |

Hver type svarer på et forskelligt spørgsmål om, hvor farven skifter.

Er du i tvivl, så spørg, hvad lyset i dit billede gør. Lys, der falder hen over en flade, er lineært. Lys fra en kilde er [radialt](https://gradiently.design/da/guide/radial-gradient). Lys, der reflekteres fra noget, der drejer eller er buet, er konisk. [Gradienttyper](https://gradiently.design/da/guide/types-of-gradients) viser dem alle side om side.

## Sådan får du koniske gradienter rigtige

1. **Beslut, hvor centrum skal ligge** En centreret konisk gradient ligner et diagram eller et hjul. Flytter du centrum til et hjørne eller uden for billedet, bliver den til lys og glans.
2. **Luk cirklen** Gentag den første farve til sidst, medmindre du vil have en synlig søm. Hårde sømme er kun til diagrammer og sprængninger.
3. **Skjul eller blødgør punktet** Hver konisk gradient snører sig sammen til et skarpt punkt i midten. Læg et logo, en cirkel eller billedets kant over det, eller slør laget.
4. **Brug en startvinkel** Ved at rotere starten med `from` flytter du den lyseste kile, og det er ofte alt, en komposition behøver.
5. **Kombinér med andre typer** En diskret konisk glans oven på en lineær eller radial base giver en fornemmelse af materiale uden at trække opmærksomhed til sig selv.

### Undgå

- Et regnbuehjul som baggrund bag tekst
- Et skarpt midtpunkt, der ligger frit fremme
- En søm, hvor den sidste farve ikke matcher den første
- Diagrammer, hvor farve er den eneste måde at kende udsnit fra hinanden

### Gør

- Korte, beslægtede farvebuer til flader
- Centrum skjult bag en genstand eller uden for lærredet
- Den første farve gentaget til sidst
- Labels eller mønstre sammen med diagramfarver

Koniske gradienter laver også mønstre: en gentagende version med fire hårde kvarte laver et skakternet mønster i én linje. [CSS-mønstre](https://gradiently.design/da/guide/css-patterns) gennemgår dem.

## FAQ

### Hvad er en konisk gradient?

En konisk gradient skifter farve, mens den roterer om et midtpunkt, så dens farvestop sættes ved vinkel og ikke afstand.

### Er en konisk gradient det samme som en vinkelgradient?

Ja. Figma og flere andre designværktøjer kalder den en vinkelgradient. CSS kalder den en konisk gradient.

### Hvordan laver jeg et lagkagediagram med en konisk gradient?

Giv hver farve en start- og slutposition med hårde stop, for eksempel violet fra 0 % til 45 % og pink fra 45 % til 75 %. Tilføj labels, så diagrammet ikke afhænger af farve alene.

### Hvorfor er der en linje øverst i min koniske gradient?

Fejningen starter og slutter ved den samme vinkel. Er den sidste farve forskellig fra den første, opstår der en søm dér. Gentag den første farve til sidst for at fjerne den.