Voimme käyttää laatikkovarjoja (box shadows) luodaksemme visuaalisen efektin, jossa elementti näyttää leijuvan taustan yläpuolella. Tämä efekti lisää syvyyttä, korostaa tiettyjä elementtejä ja tuo visuaalista kiinnostavuutta verkkosivulle. Tämän saavuttamiseksi voidaan käyttää box-shadow-ominaisuutta.

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

• offset-x viittaa varjon vaakasuuntaiseen sijaintiin; positiivinen arvo siirtää varjoa oikealle elementistä ja negatiivinen arvo vasemmalle;
• offset-y viittaa varjon pystysuuntaiseen sijaintiin; positiivinen arvo siirtää varjoa alaspäin ja negatiivinen arvo ylöspäin;
• blur-radius määrittää varjon sumentumisasteen ja on valinnainen arvo; suurempi arvo tuottaa sumeamman varjon;
• spread-radius on myös valinnainen ja kasvattaa tai pienentää varjon kokoa positiivisen tai negatiivisen arvon mukaan;
• color määrittää varjon värin millä tahansa kelvollisella väriarvolla ja on myös valinnainen arvo.

Huomio

Parhaiten sopivan varjon löytämiseksi vieraile lähteessä shadow generator.

box-shadow-ominaisuuden lisäksi text-shadow ja drop-shadow -ominaisuuksilla voidaan luoda varjoja vastaavasti tekstille ja muille elementeille. Ne toimivat samalla tavalla kuin box-shadow-ominaisuus. Näitä ominaisuuksia kuitenkin käytetään harvemmin kuin box-shadow.-ominaisuutta.