# CSS box shadow: bløde, lagdelte skygger, der ser ægte ud

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

En enkelt grå box-shadow er den hurtigste måde at få en brugerflade til at ligne en skabelon. Ægte skygger er flere skygger på én gang, tonede og mere dæmpede, end du tror.

## The short version

- CSS-egenskaben box shadow tager et valgfrit inset-nøgleord, to forskydninger, en sløringsradius, en spredningsradius og en farve.
- En enkelt box shadow ser kunstig ud, fordi ægte genstande kaster en skarp kontaktskygge og en bred blød skygge på samme tid.
- At lægge tre til fem skygger i lag, hver med omkring dobbelt så stor forskydning og sløring som den forrige og lav opacitet, giver en blød, troværdig skygge.
- At tone skyggen mod baggrundens farvetone ser mere naturligt ud end ren sort på farvede eller varme overflader.
- At animere box-shadow tegner forfra i hver frame, så tone i stedet opaciteten af et pseudoelement, der bærer den større skygge.

En **CSS box shadow** skrives `box-shadow: 0 4px 12px rgb(0 0 0 / 0.15)`: en vandret forskydning, en lodret forskydning, en sløringsradius, en valgfri spredning og en farve. Den ene skygge er fin til en hurtig prototype, men den ser sjældent ægte ud. De skygger, der overbeviser øjet, ligger i lag: flere skygger på ét element, hver større og svagere end den forrige, tonet til at passe til overfladen under.

## box-shadow-syntaks

```css
/* inset? | offset-x | offset-y | blur | spread | color */
.card { box-shadow: 0 4px 12px 0 rgb(0 0 0 / 0.15); }

/* Negative spread tucks the shadow under the box */
.card { box-shadow: 0 12px 24px -8px rgb(0 0 0 / 0.25); }

/* Inset: a shadow inside the box, like a pressed well */
.well { box-shadow: inset 0 2px 4px rgb(0 0 0 / 0.12); }

/* Spread only: a hairline that follows border-radius */
.chip { box-shadow: 0 0 0 1px rgb(15 23 42 / 0.08); }

/* Several shadows, comma separated, first on top */
.card { box-shadow: 0 1px 2px rgb(0 0 0 / 0.1), 0 8px 16px rgb(0 0 0 / 0.08); }
```

Skyggen følger altid `border-radius`, og derfor giver en skygge med kun spredning en pæn afrundet hårstreg uden at ændre layoutet.

| Værdi | Standard | Effekt |
| --- | --- | --- |
| `inset` | Fra | Tegner skyggen inden for kanten i stedet for uden for |
| Forskydning x og y | Påkrævet | Flytter skyggen. Lys ovenfra betyder en positiv y |
| Sløring | 0 | Blødgør kanten. Større værdier spreder udtoningen bredere |
| Spredning | 0 | Gør skyggen større eller mindre før sløring. Negativ trækker den ind |
| Farve | `currentcolor` | Brug en farve med alfa. Uigennemsigtige skygger ligner klistermærker |

Spredning er den værdi, de fleste springer over, og den, der retter mest. En lille negativ spredning forhindrer en stor sløring i at sive ud af siderne.

## Hvorfor en enkelt skygge ser falsk ud

Læg en bog på et bord, og se på dens skygge. Lige ved kanten, hvor den rører, er skyggen mørk og skarp. Længere ude bliver den bred og svag, fordi lys omslutter genstanden fra mange retninger. Én `box-shadow` kan kun være en af de ting ad gangen: stram og hård eller bred og sløret. Uanset hvad opdager øjet, at der mangler noget.

### Enkelt skygge

- Én mellemstor sløring i 25 procent sort
- Grå glorie hele vejen rundt om kortet
- Svært at se, hvor højt kortet svæver
- Ser snavset ud på farvede baggrunde

### Lagdelt skygge

- Fire skygger, hver svagere og bredere
- Tæt nær kanten, luftig længere væk
- Højden læses med et blik
- Tonet, så den sidder naturligt på sin overflade

## Sådan lægger du box shadows i lag

Metoden er enkel: start småt og skarpt, og fordobl så forskydning og sløring for hvert ekstra lag, mens hvert lag holdes svagt. Opaciteterne lægger sig sammen, hvor lagene overlapper, så de enkelte værdier kan være overraskende lave.

1. **Start med en kontaktskygge** `0 1px 1px` ved omkring 8 procent opacitet. Det er den mørke streg lige under kanten.
2. **Fordobl for hvert lag** Derefter `0 2px 2px`, `0 4px 4px`, `0 8px 8px`. Forskydning og sløring vokser sammen, så lyset ser ud til at komme ovenfra.
3. **Hold hvert lag svagt** Mellem 5 og 10 procent hver. Ser resultatet tungt ud, så fjern det største lag, før du gør noget mørkere.
4. **Tone farven** Erstat sort med en dyb udgave af baggrundens farvetone, for eksempel en marineblå på blå sider eller en brun på creme.

```css
:root {
  /* Shadow colour as channels, so opacity can vary per layer */
  --shadow-color: 222 47% 11%;

  --shadow-sm:
    0 1px 1px hsl(var(--shadow-color) / 0.08),
    0 2px 2px hsl(var(--shadow-color) / 0.06);

  --shadow-md:
    0 1px 1px hsl(var(--shadow-color) / 0.08),
    0 2px 2px hsl(var(--shadow-color) / 0.07),
    0 4px 4px hsl(var(--shadow-color) / 0.06),
    0 8px 8px hsl(var(--shadow-color) / 0.05);

  --shadow-lg:
    0 1px 1px hsl(var(--shadow-color) / 0.07),
    0 2px 2px hsl(var(--shadow-color) / 0.07),
    0 4px 4px hsl(var(--shadow-color) / 0.06),
    0 8px 8px hsl(var(--shadow-color) / 0.06),
    0 16px 16px hsl(var(--shadow-color) / 0.05),
    0 32px 32px hsl(var(--shadow-color) / 0.04);
}

.card { box-shadow: var(--shadow-md); }
.dialog { box-shadow: var(--shadow-lg); }
```

En højdeskala i tre trin som custom properties. Ret `--shadow-color` én gang, og hver skygge i systemet følger med.

At gemme skygger som variabler gør dem til design tokens, som holder hvert kort, hver menu og hver dialog ensartet. [CSS-variabler til temaer](https://gradiently.design/da/guide/css-custom-properties-theming) og [design tokens](https://gradiently.design/da/guide/design-tokens) viser, hvordan du kobler dem ind i et helt tema.

## En højdeskala til en brugerflade

Skygge er et signal om højde, så den bør betyde det samme overalt. Vælg tre eller fire niveauer, og tildel dem opgaver. Alt, der svæver højere, får en større, blødere skygge, aldrig bare en mørkere.

| Niveau | Token | Bruges til |
| --- | --- | --- |
| 0 | ingen eller en hårstreg på 1px spredning | Inputfelter, tabelrækker, flade kort på en tonet side |
| 1 | `--shadow-sm` | Kort i hvile, knapper, der skal føles som noget, man kan trykke på |
| 2 | `--shadow-md` | Kort under musen, rullemenuer, popovers |
| 3 | `--shadow-lg` | Dialoger, sheets, alt over en dæmpet side |

Fire niveauer dækker næsten enhver brugerflade. Flere end det, og folk kan ikke længere se forskel på dem.

## Skygger på farvede og mørke baggrunde

Rent sorte skygger bliver grå og mudrede på en farvet overflade, på samme måde som sort blandet i maling gør den kedelig. Tag i stedet skyggefarven fra baggrunden: en dyb blågrøn skygge på en mynteside, en mørk blomme på en lilla. På gradientbaggrunde skal du vælge gradientens mørkeste stop og bruge det ved lav opacitet.

- Myntefarvet side: #f0fdfa
- Blågrøn skygge: #134e4a
- Lilla side: #faf5ff
- Blommeskygge: #3b0764
- Cremefarvet side: #fdf6ec
- Umbraskygge: #451a03

Tre sidefarver, hver med den skyggefarve, der passer til den. Brug skyggetonerne ved 5 til 10 procent pr. lag.

I mørk tilstand forsvinder skygger næsten, fordi der er lidt lys, de kan blokere. Vis højde ved i stedet at gøre hævede overflader en smule lysere, og behold en svag hårstreg ved kanten. [Design af mørk tilstand](https://gradiently.design/da/guide/dark-mode-design) gennemgår overfladefarverne. Til paneler, der svæver over billeder, adskiller et [backdrop filter](https://gradiently.design/da/guide/css-blur-background) ofte lagene bedre end en kraftigere skygge.

## At animere box-shadow uden hak

At ændre `box-shadow` ved hover tvinger browseren til at tegne skyggen forfra i hver frame af overgangen. På én knap er det fint. På et grid med halvtreds kort hakker det. Den almindelige løsning er at lægge den større skygge på et pseudoelement og tone dets opacitet, som browseren kan sammensætte billigt.

```css
.card {
  position: relative;
  box-shadow: var(--shadow-sm);
}

.card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transition: opacity 200ms ease-out;
  pointer-events: none;
}

.card:hover::after { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .card::after { transition: none; }
}
```

Begge skygger males én gang. Hover ændrer kun opaciteten, så intet tegnes forfra under overgangen.

Mere om, hvad der koster maletid, står i [CSS gradient-ydeevne](https://gradiently.design/da/guide/css-gradient-performance), og den samme lagdelte tilgang passer til knapper i [gradientknapper i CSS](https://gradiently.design/da/guide/css-gradient-button).

## Hvornår du skal springe skyggen over

Skygger adskiller en overflade fra det, der er bag den. Er baggrunden en rig gradient eller et fotografi, kæmper en stærk skygge imod den. Ofte gør en roligere baggrund mere for kortet, end nogen skygge kan. Marks fra Gradiently er bygget til det: hver er en levende baggrund med sine egne farver, sit eget lys og korn, og de ord, du lægger over den, forbliver læselige, fordi Marken beroliger sig selv bag dem, uden bokse eller skygger, der gør arbejdet.

## FAQ

### Hvad er værdierne i CSS box-shadow?

Et valgfrit `inset`, en vandret forskydning, en lodret forskydning, en sløringsradius, en spredningsradius og en farve, for eksempel `0 4px 12px 0 rgb(0 0 0 / 0.15)`.

### Hvordan laver jeg en blød box shadow i CSS?

Læg tre til fem skygger i lag, med dobbelt forskydning og sløring hver gang, ved 5 til 10 procent opacitet hver. Tone dem mod baggrundsfarven.

### Hvordan tilføjer jeg mere end én box shadow?

Adskil dem med kommaer i én `box-shadow`-deklaration. Den første skygge på listen tegnes øverst.

### Hvad gør spredning i box-shadow?

Den gør skyggen større eller mindre, før den sløres. En negativ spredning forhindrer en stor sløring i at vise sig i boksens sider.

### Er det dårligt for ydeevnen at animere box-shadow?

Det tegner forfra i hver frame. Læg hover-skyggen på et pseudoelement, og lav overgang på dets opacitet i stedet.