Vi kan bruge box shadows til at skabe en visuel effekt, hvor et element ser ud til at svæve over baggrunden. Denne effekt kan tilføre dybde, fremhæve specifikke elementer og øge den visuelle interesse på en webside. For at opnå dette kan vi anvende egenskaben box-shadow.

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

• offset-x angiver skyggeeffektens horisontale placering, hvor en positiv værdi flytter skyggen til højre for elementet og en negativ værdi flytter den til venstre;
• offset-y angiver skyggeeffektens vertikale placering, hvor en positiv værdi flytter skyggen nedad og en negativ værdi flytter den opad;
• blur-radius bestemmer graden af sløring for skyggen og er en valgfri værdi, hvor en højere værdi giver en mere sløret skygge;
• spread-radius er også valgfri og øger eller mindsker skyggeeffektens størrelse afhængigt af om værdien er positiv eller negativ;
• color angiver skyggeeffektens farve ved brug af et hvilket som helst gyldigt farveformat og er også en valgfri værdi.

Bemærk

For at finde den bedst egnede skygge, besøg kilden shadow generator.

Ud over box-shadow giver egenskaberne text-shadow og drop-shadow mulighed for at tilføje skygger til henholdsvis tekst og andre elementer. De fungerer på samme måde som box-shadow-egenskaben. Disse egenskaber anvendes dog sjældnere sammenlignet med box-shadow.