# CSS box-shadow: pehmeät, aidon tuntuiset varjot

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

Yksi harmaa box-shadow saa käyttöliittymän näyttämään nopeasti valmispohjalta. Oikea varjo koostuu useasta yhtäaikaisesta, sävytetystä ja yllättävän hillitystä varjosta.

## The short version

- CSS box-shadow hyväksyy valinnaisen inset-avainsanan, kaksi siirtymää, sumennussäteen, laajenemissäteen ja värin.
- Yksi varjo näyttää keinotekoiselta, sillä esine heittää samanaikaisesti terävän kosketusvarjon ja leveän pehmeän varjon.
- Kolmesta viiteen heikosti peittävää varjoa, joiden siirtymä ja sumennus likimain kaksinkertaistuvat, tekee pehmeän uskottavan tuloksen.
- Taustan sävyyn taittava varjo näyttää puhdasta mustaa luonnollisemmalta värikkäillä ja lämpimillä pinnoilla.
- box-shadow-animaatio piirtää joka ruudun uudelleen. Häivytä sen sijaan suuren varjon sisältävän pseudoelementin opacity-arvoa.

**CSS box-shadow** kirjoitetaan `box-shadow: 0 4px 12px rgb(0 0 0 / 0.15)`: vaakasiirtymä, pystysiirtymä, sumennussäde, valinnainen laajeneminen ja väri. Yksi varjo riittää pikaprototyyppiin, mutta näyttää harvoin aidolta. Uskottava varjo kerrostetaan: samalla elementillä on useita edellistä suurempia ja heikompia varjoja, joiden väri sopii alla olevaan pintaan.

## box-shadow-syntaksi

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

Varjo seuraa aina border-radius-arvoa. Pelkkä laajeneminen tekee siksi siistin pyöreäreunaisen hiusviivan muuttamatta asettelua.

| Arvo | Oletus | Vaikutus |
| --- | --- | --- |
| `inset` | Pois | Piirtää varjon reunan sisälle ulkopuolen sijaan |
| Siirtymät x ja y | Pakolliset | Siirtää varjoa. Ylhäältä tuleva valo tarkoittaa positiivista y:tä |
| Sumennus | 0 | Pehmentää reunaa. Suurempi arvo levittää häivytystä |
| Laajeneminen | 0 | Kasvattaa tai pienentää varjoa ennen sumennusta. Negatiivinen vetää sisään |
| Väri | `currentcolor` | Käytä alfaväriä: peittävä varjo näyttää tarralta |

Laajeneminen jää usein pois, vaikka korjaa paljon. Pieni negatiivinen arvo estää suuren sumennuksen vuotamisen sivuille.

## Miksi yksi varjo näyttää keinotekoiselta

Aseta kirja pöydälle ja katso varjoa. Kosketusreunalla se on tumma ja terävä. Kauempana se levenee ja heikkenee, sillä valo kiertää esinettä monesta suunnasta. Yksi `box-shadow` voi olla vain tiukka ja kova tai leveä ja sumea. Kummassakin silmä huomaa puutteen.

### Yksi varjo

- Yksi keskisuuri sumennus 25-prosenttisella mustalla
- Harmaa kehä koko kortin ympärillä
- Kortin korkeutta on vaikea hahmottaa
- Likainen vaikutelma väripohjalla

### Kerrostettu varjo

- Neljä yhä leveämpää ja heikompaa varjoa
- Tiheä reunalla, ilmava kauempana
- Korkeus näkyy heti
- Pintaan luonnollisesti sopiva sävy

## Miten kerrostat laatikkovarjot

Aloita pienestä terävästä varjosta ja kaksinkertaista siirtymä sekä sumennus jokaisessa kerroksessa. Pidä kerrokset heikkoina. Peittävyydet summautuvat päällekkäisillä alueilla, joten yksittäiset arvot voivat olla yllättävän pieniä.

1. **Aloita kosketusvarjosta** `0 1px 1px` noin 8 %:n peittävyydellä. Se on tumma viiva heti reunan alla.
2. **Kaksinkertaista kerroksittain** Sitten `0 2px 2px`, `0 4px 4px` ja `0 8px 8px`. Siirtymä ja sumennus kasvavat yhdessä kuin valo tulisi ylhäältä.
3. **Pidä kerrokset heikkoina** 5-10 % kullekin. Jos tulos on raskas, poista suurin kerros ennen tummennusta.
4. **Sävytä väri** Korvaa musta tummalla taustasävyllä, kuten laivastonsinisellä sinisillä sivuilla tai ruskealla kermapohjalla.

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

Kolmiportainen korkeusasteikko mukautettuina ominaisuuksina. Yksi --shadow-color-muutos päivittää järjestelmän varjot.

Muuttujiin tallennetut varjot ovat suunnittelutokeneita, jotka yhtenäistävät kortit, valikot ja dialogit. [CSS-muuttujat teemoissa](https://gradiently.design/fi/guide/css-custom-properties-theming) ja [suunnittelutokenit](https://gradiently.design/fi/guide/design-tokens) näyttää liittämisen kokonaiseen teemaan.

## Käyttöliittymän korkeusasteikko

Varjo viestii korkeudesta, joten merkityksen pitää pysyä samana kaikkialla. Valitse kolme tai neljä tasoa ja määritä käyttötarkoitukset. Korkeampi pinta saa suuremman ja pehmeämmän varjon, ei vain tummempaa.

| Taso | Token | Käyttö |
| --- | --- | --- |
| 0 | none tai 1px:n laajenemisen hiusviiva | Kentät, taulukkorivit ja tasaiset kortit sävytetyllä sivulla |
| 1 | `--shadow-sm` | Lepäävät kortit ja painettavilta tuntuvat painikkeet |
| 2 | `--shadow-md` | Osoittimen alla olevat kortit, pudotusvalikot ja ponnahdukset |
| 3 | `--shadow-lg` | Dialogit, paneelit ja himmennetyn sivun päällä oleva sisältö |

Neljä tasoa kattaa lähes kaikki käyttöliittymät. Useampia on vaikea erottaa toisistaan.

## Varjot värikkäillä ja tummilla taustoilla

Puhdas musta muuttuu väripinnalla harmaaksi ja sameaksi kuten maaliin sekoitettu musta. Ota varjoväri taustasta: tumma sinivihreä mintulle, tumma luumu lilalle. Liukuväritaustalla valitse tummin väripiste ja käytä sitä heikolla peittävyydellä.

- Minttusivu: #f0fdfa
- Sinivihreä varjo: #134e4a
- Lilasivu: #faf5ff
- Luumunvärinen varjo: #3b0764
- Kermasivu: #fdf6ec
- Umbravarjo: #451a03

Kolme sivuväriä sopivine varjosävyineen. Käytä kullekin kerrokselle 5-10 %:n peittävyyttä.

Tummassa teemassa varjo lähes katoaa, sillä peitettävää valoa on vähän. Näytä korkeus vaalentamalla kohotettuja pintoja ja säilytä heikko reunaviiva. [Tumman teeman suunnittelu](https://gradiently.design/fi/guide/dark-mode-design) käsittelee pintavärejä. Kuvan yllä kelluvassa paneelissa [backdrop-filter](https://gradiently.design/fi/guide/css-blur-background) erottaa kerrokset usein raskasta varjoa paremmin.

## box-shadow-animaatio ilman nykimistä

Osoittimen alla muuttuva `box-shadow` pakottaa selaimen piirtämään varjon uudelleen jokaisella siirtymän ruudulla. Yksi painike toimii, viidenkymmenen kortin ruudukko nykii. Aseta suurempi varjo pseudoelementtiin ja häivytä sen opacity-arvoa, jonka selain yhdistää kevyesti.

```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; }
}
```

Molemmat varjot piirretään kerran. Osoittimen alla muuttuu vain opacity, joten siirtymä ei vaadi uudelleenpiirtoa.

Piirtokustannuksia käsittelee [CSS-liukuvärien suorituskyky](https://gradiently.design/fi/guide/css-gradient-performance). Sama kerrostus sopii artikkelin [CSS-liukuväripainikkeet](https://gradiently.design/fi/guide/css-gradient-button) painikkeisiin.

## Milloin jätät varjon pois

Varjo erottaa pinnan taustasta. Rikas liukuväri tai valokuva kilpailee vahvan varjon kanssa. Rauhallisempi tausta auttaa korttia usein enemmän. Gradientlyn Markit rakentuvat tästä: elävä tausta omilla väreillä, valolla ja rakeisuudella rauhoittuu sanojen takana ja pitää ne luettavina ilman laatikoita tai varjoja.

## FAQ

### Mitkä ovat CSS box-shadowin arvot?

Valinnainen `inset`, vaaka- ja pystysiirtymä, sumennussäde, laajenemissäde ja väri. Esimerkiksi `0 4px 12px 0 rgb(0 0 0 / 0.15)`.

### Miten teen pehmeän CSS-varjon?

Kerrosta kolmesta viiteen varjoa, kaksinkertaista siirtymä ja sumennus joka kerta ja käytä 5-10 %:n peittävyyttä. Sävytä taustan väriin.

### Miten lisään useamman laatikkovarjon?

Erota ne pilkuilla yhdessä `box-shadow`-määrittelyssä. Ensimmäinen piirretään päälle.

### Mitä spread tekee box-shadowissa?

Se kasvattaa tai pienentää varjoa ennen sumennusta. Negatiivinen arvo estää suurta sumennusta näkymästä sivuilla.

### Onko box-shadow-animaatio raskas?

Se piirtää jokaisen ruudun uudelleen. Aseta osoitintilan varjo pseudoelementtiin ja animoi sen opacity-arvoa.