# CSS radial gradient: former, størrelser og positioner

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

radial-gradient() tegner farve udad fra et punkt. Her er hver del af den med levende eksempler, plus lagtricksene bag bløde skær, spotlys og vignetter.

## The short version

- En CSS radial gradient spreder farve udad fra et midtpunkt og skrives med funktionen radial-gradient() overalt, hvor CSS accepterer et billede.
- Som standard er en radial gradient en ellipse, centreret i boksen og dimensioneret til at nå det fjerneste hjørne.
- Størrelsesnøgleordene closest-side, closest-corner, farthest-side og farthest-corner afgør, hvor det sidste farvestop lander.
- Nøgleordet at flytter centrum, for eksempel at 20% 30%, og positioner virker som background-position.
- At lægge flere radiale gradienter, der falmer til transparent, i lag er den almindelige måde at bygge bløde skær og mesh-lignende baggrunde i CSS på.

En **CSS radial gradient** blander farve udad fra et punkt, som lys, der spreder sig fra en lampe. Du skriver den med `radial-gradient()` og bruger den, hvor CSS tager et billede, som regel `background-image`. Uden indstillinger tegner den en ellipse midt i boksen, der når det fjerneste hjørne: `radial-gradient(#fef3c7, #b45309)` giver et blegt centrum, der gløder ud til dyb rav.

Ravgult skær, alle standarder: `radial-gradient(#fef3c7, #f59e0b 45%, #78350f)`

En ellipse, centreret og dimensioneret til det fjerneste hjørne. Det får du, når du kun angiver farver.

Alt andet i funktionen ændrer en af tre ting: **formen**, **størrelsen** og **positionen**. Når du kan styre dem, tegner den samme funktion skær, spotlys, vignetter, solstråler og de farvepøle, der ligger bag en [mesh gradient i CSS](https://gradiently.design/da/guide/css-mesh-gradient). For designsiden af radiale blandinger, se ledsageguiden om [radiale gradienter](https://gradiently.design/da/guide/radial-gradient).

## Syntaksen for 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 komme i begge rækkefølger. Positionen følger altid efter ordet at.

| Del | Værdier | Standard |
| --- | --- | --- |
| Form | `circle` eller `ellipse` | `ellipse` |
| Størrelse | et nøgleord, én længde til en cirkel eller to længder eller procenter til en ellipse | `farthest-corner` |
| Position | `at` efterfulgt af alt, `background-position` accepterer | `at center` |
| Interpolation | `in oklab`, `in oklch` og andre farverum | sRGB til hexfarver |
| Farvestop | to eller flere farver med valgfrie positioner | påkrævet |

Delene i radial-gradient(). Kun farvestoppene er påkrævet.

Én regel fanger folk: en cirkels størrelse skal være en længde som `200px`, aldrig en procent, fordi en procent af et rektangel ikke har nogen enkelt radius. Ellipser accepterer procenter, som i `ellipse 60% 40%`. [MDN’s reference for radial-gradient()](https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/radial-gradient) viser hele grammatikken.

## Cirkel eller ellipse

En ellipse strækker sig med boksen, så på et bredt banner er skæret bredt, og på en høj story er det højt. En cirkel forbliver rund, uanset hvad boksen gør. Brug ellipser til baggrunde, der skal fylde deres beholder jævnt, og cirkler til alt, der skal læses som en lyskilde, en planet eller en knaps skær.

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

De samme stop fra mint til skov. På en bred flise spreder ellipsen sig sidelæns, og cirklen gør ikke.

## Størrelsesnøgleord: fra closest-side til farthest-corner

Størrelsen afgør, hvor det sidste farvestop lander, og det er der, gradientens slutform sidder. De fire nøgleord måler fra centrum til boksens nærmeste eller fjerneste side eller hjørne. De ser kun forskellige ud, når centrum ligger uden for midten, så alle eksemplerne herunder 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 ender ved den nærmeste kant. farthest-corner, standarden, når det hjørne, der er længst væk.

I praksis passer `closest-side` til afgrænsede former som prikker og badges, fordi farven aldrig løber ud over den nærmeste kant. `farthest-corner` passer til baggrunde, fordi blandingen dækker hele boksen. Når du har brug for præcis kontrol, så angiv en længde: `circle 180px at 50% 0` er et skær på 180 pixel, der hænger fra overkanten.

## Placering med at

Nøgleordet `at` placerer centrum med de samme værdier som `background-position`: nøgleord som `at top right`, procenter som `at 20% 80%` eller længder som `at 40px 60px`. Centrum kan endda sidde uden for boksen, som i `at 50% 120%`, der giver et horisontskær, der stiger op nedefra under bundkanten.

- 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)`

At flytte centrum ændrer stemningen mere, end at ændre farverne gør.

## Lagdelte radiale skær

Det mest nyttige radiale mønster er flere gradienter stablet i ét `background-image`, hver falmende til `transparent`, oven på en flad mørk farve. Hvert lag er en pøl af lys på sin egen plads. Fordi det første lag males øverst, så læg det skarpeste og mindste skær 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 pøle af violet, pink og himmelblå på en næsten sort baggrund. Ændr en position, og hele kompositionen forskyder sig.

To mønstre mere dækker de fleste resterende opgaver. En **vignet** mørkner kanterne: `radial-gradient(ellipse, transparent 55%, rgb(0 0 0 / 0.55))` lagt over et foto. Et **spotlys** følger markøren, når du giver dets position fra brugerdefinerede egenskaber, som `radial-gradient(circle 240px at var(--x) var(--y), rgb(255 255 255 / 0.15), transparent)`, med et par linjer JavaScript, der sætter `--x` og `--y` ved `pointermove`.

> **Bløde skær får let bånd** Store radiale fades med lav kontrast på mørke baggrunde er der, hvor trin viser sig først. Et svagt støjlag øverst skjuler det. Se [CSS-støjtekstur](https://gradiently.design/da/guide/css-noise-texture) og [gradientbanding](https://gradiently.design/da/guide/gradient-banding).

## Gentagende radiale gradienter

`repeating-radial-gradient()` gentager sine stop udad, til boksen er fuld, så et par hårde stop bliver til ringe. Brug længder til stoppositionerne, så ringbredden forbliver konstant. Det er grundlaget for krusning, skydeskive og halvtoneagtige teksturer, og guiden om [CSS-mønstre](https://gradiently.design/da/guide/css-patterns) har mere.

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

Hårde stop ved faste længder gør en radial gradient til ringe.

### Undgå

- Procenter til en cirkels størrelse, som er ugyldige
- Lyse skær, der ender i en hård kant, fordi det sidste stop er ugennemsigtigt
- At centrere hvert skær ved 50% 50%
- Fem overlappende skær med lige stor styrke

### Gør

- Længder til cirkler, procenter til ellipser
- Lad hvert skær falme til `transparent`
- Placér skær skævt, nær hjørner eller under kanten
- Ét dominerende skær og ét eller to mere dæmpede

## FAQ

### Hvordan laver jeg en cirkelgradient i CSS?

Brug `radial-gradient(circle, farve1, farve2)`. Tilføjer du `circle`, forbliver formen rund. Uden den får du en ellipse, der strækker sig med boksen.

### Hvordan flytter jeg centrum af en radial gradient?

Tilføj `at` og en position efter form og størrelse, for eksempel `radial-gradient(circle at 20% 30%, #c4b5fd, #1e1b4b)`. Positioner virker som `background-position`.

### Hvad betyder farthest-corner?

Den dimensionerer gradienten, så dens sidste farvestop når det hjørne af boksen, der er længst fra centrum. Det er standardstørrelsen.

### Kan en cirkulær radial gradient bruge en procentstørrelse?

Nej. En cirkel skal have én længde som `200px`. Ellipser kan bruge to procenter, som `ellipse 60% 40%`.

### Hvordan laver jeg en glødeeffekt med CSS-gradienter?

Læg en eller flere `radial-gradient()`-værdier i lag, der falmer fra en halvgennemsigtig farve til `transparent`, oven på en mørk `background-color`.