# CSS-boksskygge: myke skygger i lag som virker ekte

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

Én grå box-shadow er den raskeste veien til et grensesnitt som ligner en mal. Ekte skygger består av flere skygger samtidig, med fargetone og mindre styrke enn du tror.

## The short version

- CSS-egenskapen box-shadow tar et valgfritt inset-nøkkelord, to forskyvninger, en uskarphetsradius, en utvidelsesradius og en farge.
- Én boksskygge virker kunstig fordi ekte gjenstander kaster både en skarp kontaktskygge og en bred, myk skygge samtidig.
- Tre til fem skygger i lag, hver med omtrent dobbel forskyvning og uskarphet og lav opasitet, gir en myk, troverdig skygge.
- Å tone skyggen mot bakgrunnens fargetone virker mer naturlig enn rent svart på fargede eller varme flater.
- Animasjon av box-shadow tegner på nytt i hver bilderamme. Ton heller opasiteten til et pseudoelement som bærer den større skyggen.

En **CSS-boksskygge** skrives `box-shadow: 0 4px 12px rgb(0 0 0 / 0.15)`: vannrett forskyvning, loddrett forskyvning, uskarphetsradius, valgfri utvidelse og farge. Én slik skygge fungerer til en rask prototype, men ser sjelden ekte ut. Skygger som overbeviser øyet, er lagdelte: flere på ett element, hver større og svakere enn den forrige, tonet for flaten under.

## Syntaks for box-shadow

```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 alltid `border-radius`. Derfor gir en skygge med bare utvidelse en pen, avrundet hårtynn kant uten å endre layouten.

| Verdi | Standard | Effekt |
| --- | --- | --- |
| `inset` | Av | Tegner skyggen innenfor kanten fremfor utenfor |
| Forskyvning x og y | Påkrevd | Flytter skyggen. Lys ovenfra betyr positiv y |
| Uskarphet | 0 | Mykner kanten. Større verdier sprer uttoningen bredere |
| Utvidelse | 0 | Forstørrer eller krymper skyggen før uskarphet. Negativ verdi trekker den inn |
| Farge | `currentcolor` | Bruk en alfafarge. Ugjennomsiktige skygger ligner klistremerker |

Utvidelse er verdien flest hopper over, og den som løser mest. En liten negativ utvidelse hindrer stor uskarphet i å lekke ut til sidene.

## Hvorfor én skygge virker kunstig

Legg en bok på et bord og se på skyggen. Rett ved kanten der den berører bordet, er skyggen mørk og skarp. Lenger ute blir den bred og svak, fordi lys kommer rundt gjenstanden fra mange retninger. Én `box-shadow` kan bare være én av delene: tett og hard, eller bred og uskarp. Uansett merker øyet at noe mangler.

### Én skygge

- Én middels uskarphet i 25 prosent svart
- Grå ring rundt hele kortet
- Vanskelig å se hvor høyt kortet svever
- Ser skitten ut på fargede bakgrunner

### Skygge i lag

- Fire skygger, hver svakere og bredere
- Tett ved kanten, luftig lenger ute
- Høyden forstås i et blikk
- Tonet for å ligge naturlig på flaten

## Slik legger du boksskygger i lag

Metoden er enkel: start lite og skarpt, og doble forskyvning og uskarphet for hvert ekstra lag. Hold alle lag svake. Opasiteten summeres der lagene overlapper, så enkeltverdiene kan være overraskende lave.

1. **Start med en kontaktskygge** `0 1px 1px` med rundt 8 prosent opasitet. Dette er den mørke linjen rett under kanten.
2. **Doble for hvert lag** Deretter `0 2px 2px`, `0 4px 4px`, `0 8px 8px`. Forskyvning og uskarphet vokser sammen, så lyset virker å komme ovenfra.
3. **Hold hvert lag svakt** Mellom 5 og 10 prosent hver. Hvis resultatet virker tungt, fjern det største laget før du gjør noe mørkere.
4. **Ton fargen** Erstatt svart med en dyp versjon av bakgrunnens fargetone, som marineblått på blå sider eller brunt på krem.

```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øydeskala med tre trinn som egendefinerte egenskaper. Endre `--shadow-color` én gang, så følger alle skygger i systemet.

Lagrer du skygger som variabler, blir de designtokens som holder kort, menyer og dialoger konsekvente. [CSS-variabler til temaer](https://gradiently.design/nb/guide/css-custom-properties-theming) og [designtokens](https://gradiently.design/nb/guide/design-tokens) viser hvordan du kobler dem til et helt tema.

## En høydeskala for et grensesnitt

Skygge signaliserer høyde og bør bety det samme overalt. Velg tre eller fire nivåer og gi dem oppgaver. Alt som svever høyere, får en større, mykere skygge, aldri bare en mørkere.

| Nivå | Token | Brukes til |
| --- | --- | --- |
| 0 | Ingen, eller en hårtynn kant med 1px utvidelse | Inndatafelt, tabellrader, flate kort på en tonet side |
| 1 | `--shadow-sm` | Kort i hvile, knapper som skal føles trykkbare |
| 2 | `--shadow-md` | Kort under pekeren, nedtrekksmenyer, hurtigpaneler |
| 3 | `--shadow-lg` | Dialoger, paneler, alt over en dempet side |

Fire nivåer dekker nesten alle grensesnitt. Flere enn det blir vanskelige å skille fra hverandre.

## Skygger på fargede og mørke bakgrunner

Helt svarte skygger blir grå og grumsete på en farget flate, slik svart blandet i maling demper den. Hent heller skyggefargen fra bakgrunnen: dyp blågrønn på en mintside, mørk plomme på en syrinfarget. På gradientbakgrunner velger du det mørkeste stoppet og bruker det med lav opasitet.

- Mintside: #f0fdfa
- Blågrønn skygge: #134e4a
- Syrinside: #faf5ff
- Plommeskygge: #3b0764
- Kremside: #fdf6ec
- Umbraskygge: #451a03

Tre sidefarger, hver med skyggefargen som passer. Bruk skyggetonene med 5 til 10 prosent per lag.

I mørk modus forsvinner skygger nesten, fordi det er lite lys å blokkere. Vis høyde ved å gjøre hevede flater litt lysere, og behold en svak hårtynn kant. [Design for mørk modus](https://gradiently.design/nb/guide/dark-mode-design) går gjennom flatefargene. For paneler over bilder skiller et [backdrop-filter](https://gradiently.design/nb/guide/css-blur-background) ofte lagene bedre enn en tyngre skygge.

## Animer box-shadow uten hakking

Å endre `box-shadow` når pekeren holdes over, tvinger nettleseren til å tegne skyggen på nytt i hver bilderamme av overgangen. På én knapp går det fint. På et rutenett med femti kort hakker det. Standardløsningen er å legge den større skyggen på et pseudoelement og tone opasiteten, som nettleseren kan sette sammen med liten kostnad.

```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 tegnes én gang. Pekerberøring endrer bare opasiteten, så ingenting tegnes på nytt under overgangen.

Mer om hva som koster tegnetid, står i [ytelse for CSS-gradienter](https://gradiently.design/nb/guide/css-gradient-performance). Samme lagdeling passer knapper i [gradientknapper i CSS](https://gradiently.design/nb/guide/css-gradient-button).

## Når du bør droppe skyggen

Skygger skiller en flate fra det som ligger bak. Hvis bakgrunnen er en fyldig gradient eller et fotografi, konkurrerer en sterk skygge med den. Ofte gjør en roligere bakgrunn mer for kortet enn noen skygge kan. Marks fra Gradiently er bygget for dette: hver er en levende bakgrunn med egne farger, lys og korn. Ordene over forblir lesbare fordi Marken roer seg bak dem, uten bokser eller skygger som gjør jobben.

## FAQ

### Hva er verdiene i CSS box-shadow?

Valgfri `inset`, vannrett forskyvning, loddrett forskyvning, uskarphetsradius, utvidelsesradius og farge, for eksempel `0 4px 12px 0 rgb(0 0 0 / 0.15)`.

### Hvordan lager jeg en myk boksskygge i CSS?

Legg tre til fem skygger i lag, doble forskyvningen og uskarpheten hver gang, med 5 til 10 prosent opasitet per lag. Ton dem mot bakgrunnsfargen.

### Hvordan legger jeg til mer enn én boksskygge?

Skill dem med komma i én `box-shadow`-deklarasjon. Den første skyggen i listen tegnes øverst.

### Hva gjør utvidelse i box-shadow?

Den forstørrer eller krymper skyggen før den gjøres uskarp. Negativ utvidelse hindrer stor uskarphet i å synes langs sidene av boksen.

### Er animasjon av box-shadow dårlig for ytelsen?

Den tegner på nytt i hver bilderamme. Legg skyggen ved pekerberøring på et pseudoelement og animer opasiteten i stedet.