We kunnen box-shadows gebruiken om een visueel effect te creëren waarbij een element boven de achtergrond lijkt te zweven. Dit effect kan diepte toevoegen, specifieke elementen accentueren en visuele interesse aan een webpagina geven. Om dit te bereiken, kunnen we de eigenschap box-shadow toepassen.

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

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

Naast de eigenschappen box-shadow, maken text-shadow en drop-shadow het mogelijk om respectievelijk schaduwen voor tekst en andere elementen te creëren. Ze functioneren op dezelfde manier als de eigenschap box-shadow. Deze eigenschappen worden echter minder vaak gebruikt dan box-shadow..