Litteät lohkot, napit ilman syvyyttä, taustaan sulautuvat kortit: tältä näyttää tyypillinen sivusto, jossa suunnittelija on säästellyt box-shadow-ominaisuuden kanssa. Silti parilla CSS-rivillä voi muuttaa tylsän merkinnän luonteikkaaksi käyttöliittymäksi lisäämällä tyhjää tilaa, korostamalla avainlohkon tai erottamalla osion pehmeästi ilman ainuttakaan border-määritystä.

Ongelmana on, että useimmat kehittäjät pysähtyvät oletusharmaaseen varjoon 0px 2px 5px rgba(0,0,0,0.2) ja unohtavat, että box-shadow pystyy paljon muuhunkin: monikerroksisiin varjoihin, värillisiin hehkuihin, neumorfismiin, sisävarjoefekteihin ja jopa pikselitaiteen renderöintiin ilman yhtäkään div-elementtiä.

Alla on 13 tekniikkaa, jotka muuttavat box-shadow-ominaisuuden tylsästä perustyökalusta pääasialliseksi syvyyden työkaluksesi. Jokainen koodinpätkä on kopioitu oikeista projekteista ja on käyttövalmis.

💡 Pikakatsaus:

• box-shadow-syntaksin purkaminen, jotta muistat sen heti
• 13 käyttövalmista koodinpätkää: hädin tuskin näkyvästä reunuksesta monikerroksiseen värilliseen hehkuun
• Kolme tapaa sisällyttää CSS HTML:ään ja milloin kutakin kannattaa käyttää
• Usein kysytyt kysymykset: suorituskyky, filter drop-shadow, Chrome inspector ja neumorfismi

Mikä box-shadow on ja miten se toimii

box-shadow-ominaisuus lisää elementille yhden tai useamman varjon. Toisin kuin border, varjo ei vaikuta dokumentin kulkuun eikä kasvata lohkon mittoja; se piirretään "ulkopuolelle", elementin rajojen yli.

Täydellinen syntaksi:

1
box-shadow: offset-x offset-y blur-radius spread-radius color;

Parametrien erittely:

• offset-x, vaakasuuntainen siirtymä. Positiivinen arvo siirtää varjoa oikealle, negatiivinen arvo vasemmalle.
• offset-y, pystysuuntainen siirtymä. Positiivinen siirtää varjoa alas, negatiivinen ylös. Nämä ovat ainoat kaksi pakollista parametria.
• blur-radius, sumennussäde. Mitä suurempi arvo, sitä pehmeämpi ja leveämpi varjo. Oletusarvo on 0, mikä tarkoittaa teräväreunaista varjoa.
• spread-radius, levityssäde. Positiivinen arvo laajentaa varjoa ulospäin, negatiivinen arvo kutistaa sitä sisäänpäin. Hyödyllinen reunusten simulointiin ilman border-määritystä.
• color, väri missä tahansa muodossa: hex, rgb(), rgba(), hsl(). Läpinäkyvyys rgba():n tai hsla():n avulla tuottaa luonnollisimmat varjot.

Temppu on siinä, että voit antaa useita arvoja pilkulla eroteltuina. Juuri tämä avaa oven alla oleviin tekniikoihin: jokainen seuraava varjo listassa kerrostuu edellisen päälle.

1. Hädin tuskin näkyvä varjo kolmella sivulla

Minimalistinen varjo, joka lisää syvyyttä mutta ei huuda huomiota. Täydellinen tuotekorteille, artikkeli-esikatseluille ja kaikille lohkoille vaalealla taustalla.

1
box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;

Pelkkä 8px siirtymä alaspäin ja suuri 24px sumennus luovat leijuvan lohkon efektin. 0,2:n läpinäkyvyys tekee varjosta hädin tuskin näkyvän valkoisella, juuri sen verran, että silmä tuntee olonsa mukavaksi.

2. Kevyt varjo kaikilla sivuilla

Kun lohko tarvitsee varjon tasaisesti koko kehälleen, esimerkiksi modaali-ikkunalle tai työkaluvihjeelle.

1
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;

Nollasiirtymä vaakasuunnassa ja 0px levityssäde jakavat varjon symmetrisesti. Suuri sumennussäde (29px) tekee siirtymästä pehmeän. Väri rgba(100, 100, 111, ...) antaa viileän harmaan sävyn; se näyttää valkoisella paremmalta kuin puhdas musta.

4. Ohut varjo oikealle ja alas

Klassinen "kohotettu" efekti. Toimii napeille, hover-tilallisille korteille ja mille tahansa elementille, jonka pitäisi näyttää kosketeltavalta.

1
box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;

Pienet siirtymäarvot (noin 2px) ja pieni sumennus luovat terävän, lähes vektorimaisen varjon. Sopii hyvin yhteen transform: translateY(-2px)-määrityksen kanssa hover-tilassa; varjo "liikkuu" lohkon mukana, tehostaen nostoefektiä.

4. Täyteläinen varjo kaikilla sivuilla

Tapauksiin, joissa elementin on erotuttava selvästi taustasta: hero-osiot, tärkeää sisältöä sisältävät kortit, bannerit.

1
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;

Korkea läpinäkyvyys (0,35) ja pieni sumennus (15px) tuottavat korostuneen, luettavan varjon. Nollasiirtymällä vaakasuunnassa se asettuu tasaisesti; lohko näyttää leijuvan sivun yläpuolella.

5. Hajautettu monikerroksinen varjo

Viisi varjokerrosta yhdessä: yksi syvä kerros erottamaan taustasta, loput pehmeää hajautusta varten sivuilla.

1
box-shadow:
2
  rgba(0, 0, 0, 0.25) 0px 54px 55px,
3
  rgba(0, 0, 0, 0.12) 0px -12px 30px,
4
  rgba(0, 0, 0, 0.12) 0px 4px 6px,
5
  rgba(0, 0, 0, 0.17) 0px 12px 13px,
6
  rgba(0, 0, 0, 0.09) 0px -3px 5px;

Ensimmäinen kerros on päävarjo alaspäin (54px, läpinäkyvyys 0,25). Toinen on kevyt varjo ylöspäin (negatiivinen siirtymä -12px). Loput hienosäätävät reunoja. Yhdessä ne tuottavat monimutkaisen, realistisen valo- ja varjokuvion, kuin fyysinen esine hajavalossa.

6. Ohut reunus sisävarjolla

Kaksi varjoa luovat illuusion ohuesta reunuksesta (border) ja lisäävät samalla syvyyttä. Ei ainuttakaan border-määritystä koodissa.

1
box-shadow:
2
  rgba(6, 24, 44, 0.4) 0px 0px 0px 2px,
3
  rgba(6, 24, 44, 0.65) 0px 4px 6px -1px,
4
  rgba(255, 255, 255, 0.08) 0px 1px 0px inset;

Kolmen kerroksen erittely:

• Ensimmäinen, "reunus": nollasiirtymä ja -sumennus, 2px levityssäde jäljittelee border: 2px solid -määritystä.
• Toinen, päävarjo alaspäin tuomaan volyymia.
• Kolmas, valkoinen inset-varjo ylhäältä, antaen korostuksen (lasiefekti).

7. Varjo vasemmalle ja alas

Epästandardi suunta: varjo lankeaa vasemmalle ja hieman alas. Näyttää hyvältä oikeaan reunaan kohdistetuissa elementeissä tai epäsymmetrisen sommitelman luomisessa.

1
box-shadow: rgba(0, 0, 0, 0.1) -4px 9px 25px -6px;

Negatiivinen vaakasiirtymä (-4px) lähettää varjon vasemmalle. Negatiivinen levityssäde (-6px) vetää varjoa sisäänpäin, tehden siitä itse lohkoa kompaktimman; se ei "työnny" reunojen yli.

8. Kaksipuolinen varjo: valo ylhäältä vasemmalta, varjo alhaalla oikealla

Suunnatun valonlähteen simulointi, ikään kuin lamppu paistaisi vasemmasta yläkulmasta.

1
box-shadow:
2
  rgba(136, 165, 191, 0.48) 6px 2px 16px 0px,
3
  rgba(255, 255, 255, 0.8) -6px -2px 16px 0px;

Ensimmäinen kerros on sinertävä varjo (rgba(136, 165, 191, ...)) oikealle ja alas. Toinen on valkoinen "korostus" vasemmalle ja ylös (negatiiviset siirtymät, korkea peitto). Yhdessä ne luovat realistisen kolmiulotteisen vaikutelman; lohko näyttää siltä kuin softbox valaisisi sitä.

9. Värillinen hehkureunus

Yksi varjo, jossa ei ole siirtymää eikä sumennusta, mutta jolla on positiivinen leviämissäde, tuottaa siistin värillisen hehkun elementin ympärille.

1
box-shadow: rgba(3, 102, 214, 0.3) 0px 0px 0px 3px;

Sininen hehku (rgba(3, 102, 214, ...)) 3px säteellä. Täydellinen fokusoituneille syötekentille (:focus), aktiivisille painikkeille ja nykyisen valikkokohdan korostamiseen. Vaihda väriksi rgba(220, 38, 38, 0.3), niin saat validointivirheen korostuksen.

10. Kaksoissisävarjo "painetulle" efektille

Kaksi inset-kerrosta luovat syvän koveran vaikutelman. Sopii teksturoiduille taustoille, painetuille painikkeille ja koristeellisille paneeleille.

1
box-shadow:
2
  rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset,
3
  rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;

inset-avainsana siirtää varjon elementin sisäpuolelle. Ensimmäinen kerros on leveä varjo ylhäältä. Toinen on tummempi ja tiiviimpi, myös ylhäältä. Negatiivinen leviämissäde (-12px, -18px) estää varjoja täyttämästä koko lohkoa; reunat pysyvät vaaleina, kun taas keskusta on painunut.

11. Värillinen varjojen "kaskadi" alaspäin

Viisi samanväristä kerrosta, joiden siirtymä kasvaa, luovat monikerroksisen värillisen varjoefektin, kuin Material Designissa mutta kirkkaampana.

1
box-shadow:
2
  rgba(240, 46, 170, 0.4) 0px 5px,
3
  rgba(240, 46, 170, 0.3) 0px 10px,
4
  rgba(240, 46, 170, 0.2) 0px 15px,
5
  rgba(240, 46, 170, 0.1) 0px 20px,
6
  rgba(240, 46, 170, 0.05) 0px 25px;

Jokainen seuraava kerros on siirtynyt 5px kauemmas ja sen peitto on pienempi. Sumennusta ei ole määritelty, joten varjot ovat terävät, kuin vektoriraidat. Tämä tuottaa kirkkaan neon-vanan lohkon taakse. Vaihda pinkki brändiväriisi saadaksesi tunnistettavan korostuksen.

12. Värillinen "kaskadi" oikealle ja alas

Sama tekniikka, mutta vaakasuuntaisella siirtymällä; varjo kulkee vinottain.

1
box-shadow:
2
  rgba(240, 46, 170, 0.4) 5px 5px,
3
  rgba(240, 46, 170, 0.3) 10px 10px,
4
  rgba(240, 46, 170, 0.2) 15px 15px,
5
  rgba(240, 46, 170, 0.1) 20px 20px,
6
  rgba(240, 46, 170, 0.05) 25px 25px;

Diagonaalinen kaskadi luo liikkeen tuntua oikealle ja alas. Näyttää hyvältä painikkeissa hover-tilassa; lohko näyttää "liukuvan" varjonsa taakse.

13. Hajautettu varjo tiheysgradientilla

Viisi kerrosta, joissa jokaisen seuraavan siirtymä kaksinkertaistuu (2px, 4px, 8px, 16px, 32px) peiton pysyessä vakiona. Tuloksena on varjo, jossa on tasainen tiheysgradientti, kokoelman realistisin.

1
box-shadow:
2
  rgba(0, 0, 0, 0.09) 0px 2px 1px,
3
  rgba(0, 0, 0, 0.09) 0px 4px 2px,
4
  rgba(0, 0, 0, 0.09) 0px 8px 4px,
5
  rgba(0, 0, 0, 0.09) 0px 16px 8px,
6
  rgba(0, 0, 0, 0.09) 0px 32px 16px;

Jokaisen kerroksen pieni sumennus (1px, 2px, 4px, 8px, 16px) kasvaa suhteessa siirtymään. Tämä tuottaa fysikaalisesti tarkan hajonnan; varjo "haalistuu" etäisyyden myötä, kuten todellisessa maailmassa. Täydellinen korteille, joiden halutaan näyttävän mahdollisimman luonnollisilta.

Kolme tapaa sisällyttää CSS HTML:ään

Kun sopiva pätkä on valittu, se täytyy lisätä sivulle. CSS tarjoaa kolme vaihtoehtoa, ja jokaisella on oma käyttötarkoituksensa.

Sisäinen CSS

Säännöt sijoitetaan <style>-tagin sisään HTML-dokumentin <head>-osioon. Sopii yhden sivun sivustoille ja nopeisiin prototyyppeihin; kaikki on yhdessä tiedostossa.

1
<html lang="ru">
2
<head>
3
  <meta charset="utf-8">
4
  <title>CSS box-shadow — примеры</title>
5
  <style>
6
    .card {
7
      display: block;
8
      margin: 0 auto;
9
      box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
10
    }
11
  </style>
12
</head>
13
<body>
14
  <img class="card" src="screenshot.jpg" alt="Пример карточки с тенью">
15
</body>
16
</html>

Haittapuolena on, että selain ei välimuistita tyylejä erikseen, eikä niitä voi käyttää uudelleen muilla sivuilla.

Inline-CSS

Tyylit kirjoitetaan suoraan HTML-elementin style-attribuuttiin. Nopein tapa soveltaa tyylejä lennosta, mutta myös hankalin ylläpitää.

1
<img
2
  src="screenshot.jpg"
3
  alt="Пример карточки с тенью"
4
  style="box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; display: block; margin: 0 auto;"
5
>

Käytä inline-tyylejä harkiten: dynaamisiin arvoihin JavaScriptillä, sähköpostiasetteluihin (joissa sähköpostiohjelmat usein poistavat ulkoiset tyylitiedostot) ja kriittiseen CSS:ään "above the fold" -sisällölle.

Ulkoinen CSS

Säännöt siirretään erilliseen .css-tiedostoon ja linkitetään <link>-tagilla. Tämä on standardi kaikissa projekteissa, jotka ovat yksittäistä sivua monimutkaisempia.

Tiedosto styles.css:

1
.card {
2
  display: block;
3
  margin: 0 auto;
4
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
5
}

HTML-dokumentti:

1
<html lang="ru">
2
<head>
3
  <meta charset="utf-8">
4
  <title>CSS box-shadow — примеры</title>
5
  <link rel="stylesheet" href="styles.css">
6
</head>
7
<body>
8
  <img class="card" src="screenshot.jpg" alt="Пример карточки с тенью">
9
</body>
10
</html>

Ulkoinen CSS välimuistitetaan selaimessa, sitä on helppo ylläpitää ja se skaalautuu. Kaikissa kolmessa tapauksessa lopputulos renderöityy samalla tavalla; valitse menetelmä projektisi arkkitehtuurin perusteella.

Lyhyt mutta tiivis video (8 minuuttia): tekijä näyttää, miten litteät harmaat varjot korvataan liukuvärjätyillä hehkuilla kerros kerrokselta ja selittää jokaisen parametrin.

⁉️🤔 Usein kysytyt kysymykset

Mitä eroa on box-shadowilla ja filter: drop-shadow()illa?

box-shadow seuraa elementin rajaavan laatikon muotoa, joka on aina suorakulmio. filter: drop-shadow() seuraa alfakanavaa ja piirtää todellisen muodon: PNG-kuvalle, jossa on läpinäkyvyyttä, varjo seuraa objektin ääriviivoja suorakulmaisen kehyksen sijaan. Siksi drop-shadow() on korvaamaton kuville, joissa on leikattu tausta, ikoneille ja SVG:lle. Se toimii kuitenkin hitaammin, koska selain analysoi pikseleitä eikä lohkon geometriaa.

Kuinka monta box-shadow-kerrosta voi asettaa menettämättä suorituskykyä?

Muodollista rajaa ei ole, mutta käytännön katto keskivertolaitteella on 10-15 kerrosta. Sen jälkeen alat huomata FPS-pudotuksia vierityksessä ja animaatioissa, erityisesti mobiililaitteilla. Syynä on, että jokainen kerros vaatii oman renderöintikierroksensa. Animoiduille elementeille rajoita kerrokset 2-3:een ja käytä will-change: box-shadow -ominaisuutta; tämä vihjaa selaimelle, että elementti kannattaa siirtää omalle komposiittikerrokselleen.

Miten box-shadowia voi tarkastella ja debugata Chromen DevToolsissa?

Avaa DevTools (F12), valitse elementti Elements-välilehdeltä ja etsi box-shadow-ominaisuus oikeanpuoleisesta Styles-paneelista. Klikkaa arvon vieressä olevaa värineliön kuvaketta; visuaalinen varjoeditori avautuu, jossa on liukusäätimet offset-x:lle, offset-y:lle, sumennukselle ja leviämiselle. Voit muuttaa arvoja hiirellä ja nähdä tuloksen välittömästi. Monikerroksisissa varjoissa jokaista kerrosta muokataan erikseen; ne on listattu samassa kentässä pilkuilla eroteltuina.

Mitä neumorfismi on ja miten se saavutetaan box-shadowilla?

Neumorfismi on visuaalinen tyyli, jossa elementit näyttävät siltä kuin ne olisi "valettu" samasta materiaalista kuin tausta. Se saavutetaan kahdella varjolla: vaalealla ylävasemmalta ja tummalla alaoikealta (kuten tekniikassa #8). Keskeinen ehto on, että sivun taustan ja elementin värin on täsmättävä tai oltava hyvin lähellä toisiaan. Esimerkki vaalealle teemalle:

1
> .neuromorphic {
2
>   background: #e0e0e0;
3
>   box-shadow:
4
>     8px 8px 16px #bebebe,
5
>     -8px -8px 16px #ffffff;
6
> }
7
> 
8
 
9
 markdown 
10
 
11
The style is striking but controversial from an accessibility standpoint: low contrast makes elements hard to distinguish for people with visual impairments. Use sparingly and be sure to check contrast.
12
 
13
**Can you use box-shadow to render shapes without a div?**
14
 
15
> Yes, and this is a separate genre of CSS art. Since `box-shadow` supports an unlimited number of layers, each with its own coordinates and color, you can "draw" pixel art with a single `box-shadow` on a single `div`. The technique works like this: each layer with a 1px × N offset and zero blur is one "pixel." Hundreds of layers combine into an image. Generators like [CSS Box Shadow Generator](https://getcssscan.com/css-box-shadow-examples) automate the process, but for production this is more of a novelty; SVG will do the job more efficiently.
16
 
17
## Which shadow should you choose for your project?
18
 
19
The thirteen techniques above cover the full spectrum: from an unobtrusive shadow for modest cards to a bold neon cascade. The key skill here is not memorizing all the snippets but understanding the logic of the parameters; then you can assemble the right shadow for the task faster than you can find a ready-made one.
20
 
21
A quick guide:
22
 
23
- Need depth without visual noise? Use techniques **1-3** (barely visible single shadows).
24
- Want realistic "hovering" above the page? **5** (multi-layered diffused) or **13** (density gradient).
25
- Want to highlight an interactive element with color? **9** (colored border) or **11-12** (colored cascade).
26
- Simulating pressed or glass effect? **6** and **10** (inset shadows).
27
- Need neumorphism? **8** (two-sided shadow) plus a background matching the element.
28
 
29
Bookmark this page as a cheat sheet. And if you create your own signature shadow recipe, test it on real devices: the same shadow can look completely different on a Retina display and on a budget office monitor.