CSS Box Shadow: Volledige Gids met Voorbeelden

Box-schaduwen zijn een van de meest veelzijdige CSS-eigenschappen. Een goed gemaakte schaduw kan elk element verankerd, verheven of interactief laten lijken.

De box-shadow syntaxis is bedrieglijk eenvoudig maar de ontwerpmogelijkheden zijn enorm. Het stapelen van meerdere schaduwen creëert realistischere diepte.

box-shadow syntaxis

De volledige box-shadow syntaxis is: box-shadow: offset-x offset-y blur-radius spread-radius color. Alle waarden behalve offset-x en offset-y zijn optioneel. Meerdere schaduwen worden gescheiden door komma's.

Offset X/Y, vervaging, spreiding, kleur

Offset-X is de horizontale afstand. Offset-Y is de verticale afstand. Blur-radius regelt de zachtheid. Spread-radius vergroot of verkleint de schaduw.

Meerdere schaduwen en lagen

Het stapelen van meerdere box-shadow waarden creëert realistischere diepte-effecten. Een veelgebruikte techniek: combineer een kleine scherpe omgevingsschaduw met een grotere zachte hoofdschaduw.

Interne schaduwen

Het sleutelwoord inset keert de schaduwrichting om — de schaduw verschijnt binnen het element in plaats van buiten. Interne schaduwen worden gebruikt voor: ingedrukte knoptoestanden, interne afschuiningen, focusringen.

Elevatiesystemen

Material Design 3 definieert elevatieniveaus van 0 tot 5 met box-shadow waarden. Elk niveau komt overeen met een gebruiksgeval: 0 voor vlakke oppervlakken, 1 voor kaarten.

Neumorphism techniek

Neumorphism gebruikt twee box-shadows op hetzelfde element: een lichte schaduw linksboven en een donkere rechtsonder. Het element lijkt uit de achtergrond te steken.

Veelgestelde Vragen