# CSS radial-gradient: former, storlekar och positioner

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

radial-gradient() ritar färg utåt från en punkt. Här är varje del av den, med levande exempel, plus lagertricken bakom mjuka sken, strålkastare och vinjetter.

## The short version

- En radiell CSS-gradient sprider färg utåt från en mittpunkt och skrivs med funktionen radial-gradient() överallt där CSS tar emot en bild.
- Som standard är en radiell gradient en ellips, centrerad i rutan och stor nog att nå det bortersta hörnet.
- Storleksnyckelorden closest-side, closest-corner, farthest-side och farthest-corner avgör var det sista färgstoppet hamnar.
- Nyckelordet at flyttar mitten, till exempel at 20% 30%, och positionerna fungerar som background-position.
- Att lägga flera radiella gradienter som tonar ut till genomskinliga över varandra är standardsättet att bygga mjuka sken och meshliknande bakgrunder i CSS.

En **radiell CSS-gradient** blandar färg utåt från en punkt, som ljus som sprider sig från en lampa. Du skriver den med `radial-gradient()` och använder den överallt där CSS tar en bild, oftast `background-image`. Utan några alternativ ritar den en ellips i mitten av rutan som når det bortersta hörnet: `radial-gradient(#fef3c7, #b45309)` ger en blek mitt som glöder ut till djup bärnsten.

Bärnstensglöd, alla standardvärden: `radial-gradient(#fef3c7, #f59e0b 45%, #78350f)`

En ellips, centrerad, stor nog att nå det bortersta hörnet. Så blir det när du bara anger färger.

Allt annat i funktionen ändrar en av tre saker: **formen**, **storleken** och **positionen**. När du kan styra dem ritar samma funktion sken, strålkastare, vinjetter, solstrålar och färgpölarna bakom en [mesh-gradient i CSS](https://gradiently.design/sv/guide/css-mesh-gradient). För designsidan av radiella övergångar, se den tillhörande guiden om [radiella gradienter](https://gradiently.design/sv/guide/radial-gradient).

## Syntaxen för 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 och storlek kan komma i valfri ordning. Positionen följer alltid efter ordet at.

| Del | Värden | Standard |
| --- | --- | --- |
| Form | `circle` eller `ellipse` | `ellipse` |
| Storlek | ett nyckelord, en längd för en cirkel, eller två längder eller procentvärden för en ellips | `farthest-corner` |
| Position | `at` följt av vad som helst som `background-position` accepterar | `at center` |
| Interpolation | `in oklab`, `in oklch` och andra färgrymder | sRGB för hexfärger |
| Färgstopp | två eller fler färger med valfria positioner | obligatoriskt |

Delarna i radial-gradient(). Bara färgstoppen är obligatoriska.

En regel förvånar många: en cirkels storlek måste vara en längd som `200px`, aldrig procent, eftersom procent av en rektangel inte har någon enskild radie. Ellipser accepterar procent, som i `ellipse 60% 40%`. [MDN:s referens för radial-gradient()](https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/radial-gradient) listar hela grammatiken.

## Cirkel eller ellips

En ellips sträcks med rutan, så på en bred banner blir skenet brett och på en hög story blir det högt. En cirkel förblir rund vad rutan än gör. Använd ellipser för bakgrunder som ska fylla sin behållare jämnt, och cirklar för allt som ska läsas som en ljuskälla, en planet eller en knapps sken.

- Ellips: följer rutan: `radial-gradient(ellipse, #a7f3d0, #059669 50%, #022c22)`
- Cirkel: förblir rund: `radial-gradient(circle, #a7f3d0, #059669 50%, #022c22)`

Samma stopp från mynta till skogsgrön. På en bred platta sprider sig ellipsen i sidled men inte cirkeln.

## Storleksnyckelord: closest-side till farthest-corner

Storleken avgör var det sista färgstoppet hamnar, alltså var gradientens slutform ligger. De fyra nyckelorden mäter från mitten till rutans närmaste eller bortersta sida eller hörn. De ser bara olika ut när mitten ligger vid sidan om centrum, så exemplen nedan börjar alla vid `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)`

En sol, fyra storlekar. closest-side slutar vid närmaste kant, och farthest-corner, standardvärdet, når det hörn som ligger längst bort.

I praktiken passar `closest-side` för avgränsade former som prickar och märken, eftersom färgen aldrig rinner över närmaste kant. `farthest-corner` passar bakgrunder, eftersom blandningen täcker hela rutan. När du behöver exakt kontroll anger du en längd: `circle 180px at 50% 0` är ett sken på 180 pixlar som hänger från överkanten.

## Positionera med at

Nyckelordet `at` placerar mitten med samma värden som `background-position`: nyckelord som `at top right`, procent som `at 20% 80%` eller längder som `at 40px 60px`. Mitten kan till och med ligga utanför rutan, som i `at 50% 120%`, vilket ger ett horisontsken som stiger upp under nederkanten.

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

Att flytta mitten förändrar stämningen mer än att byta färger.

## Lagrade radiella sken

Det mest användbara radiella mönstret är flera gradienter staplade i en enda `background-image`, var och en tonad till `transparent`, över en jämn mörk färg. Varje lager är en ljuspöl på sin egen plats. Eftersom det första lagret målas överst lägger du det ljusaste, minsta skenet 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ölar av violett, rosa och himmelsblått på en nästan svart botten. Ändra en position och hela kompositionen förskjuts.

Två mönster till täcker det mesta som återstår. En **vinjett** mörkar kanterna: `radial-gradient(ellipse, transparent 55%, rgb(0 0 0 / 0.55))` över ett foto. En **strålkastare** följer pekaren när du matar in dess position från anpassade egenskaper, som `radial-gradient(circle 240px at var(--x) var(--y), rgb(255 255 255 / 0.15), transparent)`, med några rader JavaScript som sätter `--x` och `--y` vid `pointermove`.

> **Mjuka sken får lätt band** Stora radiella toningar med låg kontrast på mörk botten är där stegen syns först. Ett svagt brus ovanpå döljer det. Se [CSS-brustextur](https://gradiently.design/sv/guide/css-noise-texture) och [gradientband](https://gradiently.design/sv/guide/gradient-banding).

## Repeterande radiella gradienter

`repeating-radial-gradient()` upprepar sina stopp utåt tills rutan är full, så ett par hårda stopp blir ringar. Använd längder för stoppositionerna så att ringbredden hålls konstant. Det är grunden för vågor, måltavlor och halvtonsliknande texturer, och guiden om [CSS-mönster](https://gradiently.design/sv/guide/css-patterns) tar upp mer.

- Marinblå ringar: `repeating-radial-gradient(circle at 50% 50%, #0f172a 0 10px, #1e3a8a 10px 20px)`
- Hörnvågor: `repeating-radial-gradient(circle at 0 100%, #fef3c7 0 6px, #f59e0b 6px 9px, #fef3c7 9px 18px)`

Hårda stopp vid fasta längder gör en radiell gradient till ringar.

### Undvik

- Procent för en cirkels storlek, vilket är ogiltigt
- Ljusa sken som slutar i en hård kant eftersom det sista stoppet är ogenomskinligt
- Att centrera varje sken vid 50% 50%
- Fem överlappande sken med lika stor styrka

### Gör så här

- Längder för cirklar, procent för ellipser
- Tona varje sken till `transparent`
- Placera sken vid sidan om mitten, nära hörn eller under kanten
- Ett dominerande sken och ett eller två lugnare

## FAQ

### Hur gör jag en cirkelgradient i CSS?

Använd `radial-gradient(circle, färg1, färg2)`. Med `circle` förblir formen rund, utan det får du en ellips som sträcks med rutan.

### Hur flyttar jag mitten på en radiell gradient?

Lägg till `at` och en position efter formen och storleken, till exempel `radial-gradient(circle at 20% 30%, #c4b5fd, #1e1b4b)`. Positionerna fungerar som `background-position`.

### Vad betyder farthest-corner?

Det gör gradienten så stor att dess sista färgstopp når det hörn av rutan som ligger längst från mitten. Det är standardstorleken.

### Kan en radiell cirkelgradient ha en storlek i procent?

Nej. En cirkel behöver en enda längd som `200px`. Ellipser kan använda två procentvärden, som `ellipse 60% 40%`.

### Hur gör jag en glödeffekt med CSS-gradienter?

Lägg ett eller flera `radial-gradient()`-värden som tonar från en halvgenomskinlig färg till `transparent` över en mörk `background-color`.