Vi kan bruke boks-skygger for å skape en visuell effekt der et element ser ut til å sveve over bakgrunnen. Denne effekten kan gi dybde, fremheve spesifikke elementer og tilføre visuell interesse til en nettside. For å oppnå dette kan vi bruke box-shadow-egenskapen.

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

• offset-x angir den horisontale plasseringen av skyggen, der en positiv verdi flytter skyggen til høyre for elementet og en negativ verdi flytter den til venstre;
• offset-y angir den vertikale plasseringen av skyggen, der en positiv verdi flytter skyggen nedover og en negativ verdi flytter den oppover;
• blur-radius bestemmer graden av uskarphet for skyggen og er en valgfri verdi, der en høyere verdi gir en mer uklar skygge;
• spread-radius er også valgfri, og øker eller minsker størrelsen på skyggen basert på positiv eller negativ verdi;
• color angir fargen på skyggen ved bruk av et hvilket som helst gyldig fargeformat, og er også en valgfri verdi.

Merk

For å finne den mest passende skyggen, besøk kilden shadow generator.

I tillegg til box-shadow, gir egenskapene text-shadow og drop-shadow oss mulighet til å lage skygger for henholdsvis tekst og andre elementer. De fungerer på samme måte som box-shadow-egenskapen. Disse egenskapene brukes imidlertid sjeldnere sammenlignet med box-shadow.