Met box-shadows kan een visueel effect worden gecreëerd waarbij een element boven de achtergrond lijkt te zweven. Dit effect zorgt voor diepte, benadrukt specifieke elementen en voegt visuele aantrekkingskracht toe aan een webpagina. Dit wordt bereikt door de eigenschap box-shadow toe te passen.

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

• offset-x verwijst naar de horizontale positie van de schaduw; een positieve waarde verschuift de schaduw naar rechts van het element, een negatieve waarde naar links;
• offset-y verwijst naar de verticale positie van de schaduw; een positieve waarde verschuift de schaduw naar beneden, een negatieve waarde naar boven;
• blur-radius bepaalt de mate van vervaging van de schaduw en is optioneel; een hogere waarde zorgt voor een meer vervaagde schaduw;
• spread-radius is ook optioneel en vergroot of verkleint de schaduw afhankelijk van de positieve of negatieve waarde;
• color specificeert de kleur van de schaduw in elk geldig kleurformaat en is eveneens optioneel.

Opmerking

Voor het vinden van de meest geschikte schaduw, bezoek de bron shadow generator.

Naast de eigenschappen box-shadow, bieden text-shadow en drop-shadow de mogelijkheid om respectievelijk schaduwen toe te voegen aan tekst en andere elementen. Deze eigenschappen functioneren op dezelfde manier als de box-shadow-eigenschap. Toch worden deze eigenschappen minder vaak gebruikt in vergelijking met box-shadow.