# Radiell gradient i CSS: form, størrelse og plassering

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

radial-gradient() sprer farger utover fra et punkt. Her forklares alle delene med levende eksempler, samt lagene bak myk glød, spotlys og vignettering.

## The short version

- En radiell gradient i CSS sprer farger utover fra et midtpunkt og skrives med funksjonen radial-gradient() overalt der CSS godtar et bilde.
- Som standard er en radiell gradient en ellipse, sentrert i boksen og stor nok til å nå det fjerneste hjørnet.
- Størrelsesordene closest-side, closest-corner, farthest-side og farthest-corner bestemmer hvor det siste fargestoppet havner.
- Nøkkelordet at flytter midtpunktet, for eksempel at 20% 30%, og posisjonene fungerer som background-position.
- Flere radielle gradienter som tones ut til gjennomsiktighet i lag, er standardmetoden for å lage myk glød og mesh-lignende bakgrunner i CSS.

En **radiell gradient i CSS** blander farger utover fra et punkt, som lys fra en lampe. Du skriver den med `radial-gradient()` og bruker den der CSS godtar et bilde, vanligvis `background-image`. Uten innstillinger tegner den en ellipse midt i boksen som når det fjerneste hjørnet: `radial-gradient(#fef3c7, #b45309)` gir et lyst sentrum som gløder utover mot dyp rav.

Ravglød med standardinnstillinger: `radial-gradient(#fef3c7, #f59e0b 45%, #78350f)`

En ellipse, sentrert og stor nok til å nå det fjerneste hjørnet. Det får du når du bare oppgir farger.

Alt annet i funksjonen endrer én av tre ting: **formen**, **størrelsen** og **plasseringen**. Når du styrer disse, kan samme funksjon tegne glød, spotlys, vignettering, solstråler og fargefeltene bak en [mesh-gradient i CSS](https://gradiently.design/nb/guide/css-mesh-gradient). Designbruken av radielle overganger finner du i den tilhørende guiden til [radielle gradienter](https://gradiently.design/nb/guide/radial-gradient).

## Syntaksen til radial-gradient()

```css
/* shape  size          position        stops */
radial-gradient(circle closest-side at 30% 40%, #fde047, #ea580c 60%, #1c1917)

/* everything before the first comma is optional */
radial-gradient(#fde047, #ea580c)
```

Form og størrelse kan stå i begge rekkefølger. Posisjonen kommer alltid etter ordet at.

| Del | Verdier | Standard |
| --- | --- | --- |
| Form | `circle` eller `ellipse` | `ellipse` |
| Størrelse | et nøkkelord, én lengde for en sirkel eller to lengder eller prosenter for en ellipse | `farthest-corner` |
| Plassering | `at` fulgt av en verdi som `background-position` godtar | `at center` |
| Interpolering | `in oklab`, `in oklch` og andre fargerom | sRGB for heksadesimale farger |
| Fargestopp | to eller flere farger med valgfrie posisjoner | påkrevd |

Delene i radial-gradient(). Bare fargestoppene er påkrevd.

Én regel overrasker mange: størrelsen på en sirkel må være en lengde, som `200px`, aldri en prosent, fordi en prosent av et rektangel ikke gir én bestemt radius. Ellipser godtar prosenter, som i `ellipse 60% 40%`. [MDNs referanse for radial-gradient()](https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/radial-gradient) viser hele syntaksen.

## Sirkel eller ellipse

En ellipse strekker seg med boksen, så på et bredt banner er gløden bred, og på en høy story er den høy. En sirkel holder seg rund uansett hva boksen gjør. Bruk ellipser til bakgrunner som skal fylle beholderen jevnt, og sirkler til noe som skal oppfattes som en lyskilde, en planet eller gløden rundt en knapp.

- Ellipse: følger boksen: `radial-gradient(ellipse, #a7f3d0, #059669 50%, #022c22)`
- Sirkel: holder seg rund: `radial-gradient(circle, #a7f3d0, #059669 50%, #022c22)`

De samme stoppene fra mint til skoggrønt. På en bred flis sprer ellipsen seg sidelengs, mens sirkelen ikke gjør det.

## Størrelsesord: fra closest-side til farthest-corner

Størrelsen bestemmer hvor det siste fargestoppet havner, altså hvor gradientens sluttform ligger. De fire nøkkelordene måler fra midtpunktet til nærmeste eller fjerneste side eller hjørne i boksen. De ser bare ulike ut når midtpunktet er forskjøvet, så alle eksemplene under starter ved `30% 40%`.

- closest-side: `radial-gradient(circle closest-side at 30% 40%, #fde047, #ea580c 70%, #1c1917)`
- closest-corner: `radial-gradient(circle closest-corner at 30% 40%, #fde047, #ea580c 70%, #1c1917)`
- farthest-side: `radial-gradient(circle farthest-side at 30% 40%, #fde047, #ea580c 70%, #1c1917)`
- farthest-corner: `radial-gradient(circle farthest-corner at 30% 40%, #fde047, #ea580c 70%, #1c1917)`

Én sol, fire størrelser. closest-side slutter ved nærmeste kant; farthest-corner, standardvalget, når det fjerneste hjørnet.

I praksis passer `closest-side` til avgrensede former som prikker og merker, fordi fargen aldri går utenfor nærmeste kant. `farthest-corner` passer til bakgrunner, fordi blandingen dekker hele boksen. Når du trenger nøyaktig kontroll, oppgir du en lengde: `circle 180px at 50% 0` er en glød på 180 piksler som henger fra toppkanten.

## Plassering med at

Nøkkelordet `at` plasserer midtpunktet med samme verdier som `background-position`: nøkkelord som `at top right`, prosenter som `at 20% 80%` eller lengder som `at 40px 60px`. Midtpunktet kan til og med ligge utenfor boksen, som i `at 50% 120%`, noe som gir en horisontglød som stiger opp nedenfra.

- at top left: `radial-gradient(circle at top left, #c4b5fd, #6d28d9 45%, #1e1b4b)`
- at 50% 120%: horisont: `radial-gradient(ellipse at 50% 120%, #fb7185, #9f1239 45%, #0f0a1e 75%)`
- at 80% 20%: `radial-gradient(circle at 80% 20%, #7dd3fc, #0369a1 35%, #082f49)`

Å flytte midtpunktet endrer stemningen mer enn å endre fargene.

## Radiell glød i lag

Den mest nyttige radielle oppskriften er flere gradienter stablet i én `background-image`, hver tonet ut til `transparent`, over en ensfarget mørk bunn. Hvert lag er et lysfelt på sin egen plass. Fordi det første laget tegnes øverst, setter du den sterkeste, minste gløden først.

```css
.glow {
  background-color: #0b0a1a;
  background-image:
    radial-gradient(circle at 20% 25%, rgb(124 58 237 / 0.55), transparent 45%),
    radial-gradient(circle at 80% 30%, rgb(236 72 153 / 0.45), transparent 40%),
    radial-gradient(ellipse at 50% 110%, rgb(56 189 248 / 0.4), transparent 60%);
}
```

Tre lysfelt i fiolett, rosa og himmelblått på en nesten svart bunn. Endre én posisjon, så forskyves hele komposisjonen.

To andre oppskrifter dekker de fleste øvrige behov. En **vignettering** gjør kantene mørkere: `radial-gradient(ellipse, transparent 55%, rgb(0 0 0 / 0.55))` lagt over et foto. Et **spotlys** følger pekeren når du henter posisjonen fra egendefinerte egenskaper, som `radial-gradient(circle 240px at var(--x) var(--y), rgb(255 255 255 / 0.15), transparent)`, med noen linjer JavaScript som setter `--x` og `--y` ved `pointermove`.

> **Myk glød får lett fargebånd** Store radielle overganger med lav kontrast på mørk bunn er der trinnene først blir synlige. Et svakt støylag oppå skjuler dem; se [støytekstur i CSS](https://gradiently.design/nb/guide/css-noise-texture) og [fargebånd i gradienter](https://gradiently.design/nb/guide/gradient-banding).

## Gjentakende radielle gradienter

`repeating-radial-gradient()` gjentar stoppene utover til boksen er fylt, slik at et par harde stopp blir til ringer. Bruk lengder for stopposisjonene så ringbredden holder seg konstant. Dette er grunnlaget for bølger, målskiver og rasterlignende teksturer. Guiden til [CSS-mønstre](https://gradiently.design/nb/guide/css-patterns) viser mer.

- Marineblå ringer: `repeating-radial-gradient(circle at 50% 50%, #0f172a 0 10px, #1e3a8a 10px 20px)`
- Bølger fra hjørnet: `repeating-radial-gradient(circle at 0 100%, #fef3c7 0 6px, #f59e0b 6px 9px, #fef3c7 9px 18px)`

Harde stopp ved faste lengder gjør en radiell gradient til ringer.

### Unngå

- Prosent som sirkelstørrelse, som er ugyldig
- Sterk glød med en hard kant fordi siste stopp er ugjennomsiktig
- Å sentrere all glød ved 50% 50%
- Fem overlappende lysfelt med lik styrke

### Gjør dette

- Lengder for sirkler, prosenter for ellipser
- Ton ut hvert lysfelt til `transparent`
- Plasser gløden utenfor midten, nær hjørner eller nedenfor kanten
- Ett dominerende lysfelt og ett eller to roligere

## FAQ

### Hvordan lager jeg en sirkelgradient i CSS?

Bruk `radial-gradient(circle, colour1, colour2)`. Med `circle` holder formen seg rund; uten får du en ellipse som strekker seg med boksen.

### Hvordan flytter jeg midtpunktet til en radiell gradient?

Legg til `at` og en posisjon etter form og størrelse, for eksempel `radial-gradient(circle at 20% 30%, #c4b5fd, #1e1b4b)`. Posisjoner fungerer som `background-position`.

### Hva betyr farthest-corner?

Det gjør gradienten stor nok til at siste fargestopp når hjørnet i boksen som ligger lengst fra midtpunktet. Dette er standardstørrelsen.

### Kan en sirkelformet radiell gradient ha størrelse i prosent?

Nei. En sirkel trenger én lengde, som `200px`. Ellipser kan bruke to prosenter, som `ellipse 60% 40%`.

### Hvordan lager jeg glød med CSS-gradienter?

Legg én eller flere `radial-gradient()`-verdier som går fra en halvgjennomsiktig farge til `transparent`, over en mørk `background-color`.