# CSS box shadow: mjuka skuggor i lager som ser verkliga ut

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

En enda grå box-shadow är det snabbaste sättet att få ett gränssnitt att se ut som en mall. Verkliga skuggor är flera skuggor på en gång, tonade och tystare än du tror.

## The short version

- CSS-egenskapen box shadow tar ett valfritt nyckelord inset, två förskjutningar, en suddradie, en spridningsradie och en färg.
- En enda box shadow ser konstgjord ut eftersom verkliga föremål kastar en skarp kontaktskugga och en bred mjuk skugga samtidigt.
- Att lägga tre till fem skuggor i lager, var och en med ungefär dubbelt så stor förskjutning och sudd som den förra och låg opacitet, ger en mjuk, trovärdig skugga.
- Att tona skuggan mot bakgrundens nyans ser mer naturligt ut än rent svart på färgade eller varma ytor.
- Att animera box-shadow ritar om i varje bildruta, så tona i stället opaciteten på ett pseudoelement som bär den större skuggan.

En **CSS box shadow** skrivs `box-shadow: 0 4px 12px rgb(0 0 0 / 0.15)`: en horisontell förskjutning, en vertikal förskjutning, en suddradie, en valfri spridning och en färg. Den enda skuggan duger för en snabb prototyp, men den ser sällan verklig ut. De skuggor som övertygar ögat ligger i lager: flera skuggor på ett element, var och en större och svagare än den förra, tonade för att passa ytan under.

## Syntaxen för 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); }
```

Skuggan följer alltid `border-radius`, vilket är varför en skugga med bara spridning ger en snygg rundad hårfin linje utan att ändra layouten.

| Värde | Standard | Effekt |
| --- | --- | --- |
| `inset` | Av | Ritar skuggan innanför kanten i stället för utanför |
| Förskjutning x och y | Krävs | Flyttar skuggan. Ljus ovanifrån betyder ett positivt y |
| Sudd | 0 | Mjukar upp kanten. Större värden sprider uttoningen bredare |
| Spridning | 0 | Växer eller krymper skuggan före suddningen. Negativ drar in den |
| Färg | `currentcolor` | Använd en alfafärg; ogenomskinliga skuggor ser ut som klistermärken |

Spridning är värdet de flesta hoppar över och det som åtgärdar mest. En liten negativ spridning hindrar ett stort sudd från att läcka ut på sidorna.

## Varför en enda skugga ser falsk ut

Lägg en bok på ett bord och titta på dess skugga. Precis vid kanten där den vidrör är skuggan mörk och skarp. Längre ut blir den bred och svag, eftersom ljuset sveper runt föremålet från många håll. En enda `box-shadow` kan bara vara en av de sakerna åt gången: tät och hård, eller bred och suddig. Hur som helst märker ögat att något saknas.

### Enda skugga

- Ett medelstort sudd i 25 procent svart
- Grå gloria runt hela kortet
- Svårt att se hur högt kortet svävar
- Ser smutsig ut på färgade bakgrunder

### Skugga i lager

- Fyra skuggor, var och en svagare och bredare
- Tät nära kanten, luftig längre bort
- Höjden läses med en blick
- Tonad för att sitta naturligt på sin yta

## Så lägger du box shadows i lager

Metoden är enkel: börja litet och skarpt, dubblera sedan förskjutning och sudd för varje extra lager och håll varje lager svagt. Opaciteterna läggs ihop där lagren överlappar, så enskilda värden kan vara förvånansvärt låga.

1. **Börja med en kontaktskugga** `0 1px 1px` med ungefär 8 procents opacitet. Det är den mörka linjen strax under kanten.
2. **Dubblera för varje lager** Sedan `0 2px 2px`, `0 4px 4px`, `0 8px 8px`. Förskjutning och sudd växer tillsammans, så att ljuset verkar komma ovanifrån.
3. **Håll varje lager svagt** Mellan 5 och 10 procent vardera. Om resultatet ser tungt ut, ta bort det största lagret innan du gör något mörkare.
4. **Tona färgen** Byt ut svart mot en djup version av bakgrundens nyans, som ett marinblått på blå sidor eller ett brunt på kräm.

```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öjdskala i tre steg som anpassade egenskaper. Ändra `--shadow-color` en gång så följer varje skugga i systemet.

Att lagra skuggor som variabler gör dem till designtokens, vilket håller varje kort, meny och dialogruta enhetlig. [CSS-variabler för teman](https://gradiently.design/sv/guide/css-custom-properties-theming) och [designtokens](https://gradiently.design/sv/guide/design-tokens) visar hur du kopplar in dem i ett helt tema.

## En höjdskala för ett gränssnitt

Skugga är en signal om höjd, så den bör betyda samma sak överallt. Välj tre eller fyra nivåer och ge dem uppgifter. Allt som svävar högre får en större, mjukare skugga, aldrig bara en mörkare.

| Nivå | Token | Använd den till |
| --- | --- | --- |
| 0 | none, eller en hårfin linje med 1px spridning | Inmatningsfält, tabellrader, platta kort på en tonad sida |
| 1 | `--shadow-sm` | Kort i vila, knappar som ska kännas tryckbara |
| 2 | `--shadow-md` | Kort vid hovring, rullgardinsmenyer, popovers |
| 3 | `--shadow-lg` | Dialogrutor, paneler, allt över en dämpad sida |

Fyra nivåer täcker nästan alla gränssnitt. Fler än så och folk slutar kunna skilja dem åt.

## Skuggor på färgade och mörka bakgrunder

Rent svarta skuggor blir grå och leriga på en färgad yta, på samma sätt som svart blandat i färg gör den matt. Ta i stället skuggfärgen från bakgrunden: en djup turkos skugga på en mintfärgad sida, en mörk plommon på en lila. På gradientbakgrunder, välj gradientens mörkaste stopp och använd det med låg opacitet.

- Mintsida: #f0fdfa
- Turkosskugga: #134e4a
- Lila sida: #faf5ff
- Plommonskugga: #3b0764
- Krämsida: #fdf6ec
- Umberskugga: #451a03

Tre sidfärger, var och en med den skuggfärg som passar den. Använd skuggtonerna med 5 till 10 procent per lager.

I mörkt läge försvinner skuggor nästan, eftersom det finns lite ljus för dem att blockera. Visa höjd genom att göra upphöjda ytor något ljusare i stället, och behåll en svag hårfin linje vid kanten. [Design för mörkt läge](https://gradiently.design/sv/guide/dark-mode-design) går igenom ytfärgerna. För paneler som svävar över bilder skiljer ett [backdrop filter](https://gradiently.design/sv/guide/css-blur-background) ofta lagren bättre än en tyngre skugga.

## Animera box-shadow utan hackande

Att ändra `box-shadow` vid hovring tvingar webbläsaren att rita om skuggan i varje bildruta av övergången. På en knapp går det bra. På ett rutnät med femtio kort hackar det. Standardlösningen är att lägga den större skuggan på ett pseudoelement och tona dess opacitet, vilket webbläsaren kan sammanfoga 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; }
}
```

Båda skuggorna målas en gång. Hovring ändrar bara opaciteten, så ingenting ritas om under övergången.

Mer om vad som kostar ritningstid finns i [CSS-gradienters prestanda](https://gradiently.design/sv/guide/css-gradient-performance), och samma lagermetod passar knappar i [gradientknappar i CSS](https://gradiently.design/sv/guide/css-gradient-button).

## När du ska hoppa över skuggan

Skuggor skiljer en yta från det som ligger bakom. Om bakgrunden är en rik gradient eller ett fotografi strider en stark skugga mot den. Ofta gör en tystare bakgrund mer för kortet än någon skugga kan. Gradiently-Marks är byggda för det: var och en är en levande bakgrund med egna färger, ljus och korn, och orden du lägger över den förblir läsbara eftersom Marken lugnar sig själv bakom dem, utan rutor eller skuggor som gör jobbet.

## FAQ

### Vilka värden finns i CSS box-shadow?

Ett valfritt `inset`, en horisontell förskjutning, en vertikal förskjutning, en suddradie, en spridningsradie och en färg, till exempel `0 4px 12px 0 rgb(0 0 0 / 0.15)`.

### Hur gör jag en mjuk box shadow i CSS?

Lägg tre till fem skuggor i lager, med dubbelt så stor förskjutning och sudd varje gång, på 5 till 10 procents opacitet vardera. Tona dem mot bakgrundsfärgen.

### Hur lägger jag till mer än en box shadow?

Avgränsa dem med kommatecken i en enda `box-shadow`-deklaration. Den första skuggan i listan ritas överst.

### Vad gör spridning i box-shadow?

Den växer eller krymper skuggan innan den suddas. En negativ spridning hindrar ett stort sudd från att synas på sidorna av rutan.

### Är det dåligt för prestandan att animera box-shadow?

Den ritas om i varje bildruta. Lägg hovringsskuggan på ett pseudoelement och låt dess opacitet övergå i stället.