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. Efekti saavutetaan käyttämällä box-shadow-ominaisuutta.

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

• offset-x määrittää varjon vaakasuuntaisen sijainnin; positiivinen arvo siirtää varjoa oikealle ja negatiivinen vasemmalle;
• offset-y määrittää varjon pystysuuntaisen sijainnin; positiivinen arvo siirtää varjoa alaspäin ja negatiivinen ylöspäin;
• blur-radius asettaa varjon sumentumisen asteen, 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.

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.