Wat is de CSS box-shadow eigenschap?

De CSS box-shadow eigenschap voegt een of meer schaduweffecten toe rond het kader van een element. Elke schaduw wordt beschreven door offset-waarden (X en Y), een optionele blur-radius, een optionele spread-radius en een kleur.

Wat betekenen offset, blur en spread?

Horizontale offset (X) verplaatst de schaduw naar rechts (positief) of links (negatief). Verticale offset (Y) naar beneden of boven. Blur verzacht de schaduwrand. Spread vergroot of verkleint de schaduw.

Wat is een inset-schaduw?

Het sleutelwoord inset keert de schaduwrichting om, waardoor deze binnen het elementkader verschijnt. Inset-schaduwen worden gebruikt voor ingedrukte knopeffecten.

Hoe voeg ik meerdere schaduwen toe aan één element?

Scheid meerdere schaduwwaarden met komma's: `box-shadow: 2px 2px 4px rgba(0,0,0,0.3), -2px -2px 4px rgba(255,255,255,0.5);`.

Beïnvloedt box-shadow de layout?

Nee, box-shadow beïnvloedt de layout niet en veroorzaakt geen reflow. Het is puur visueel.

Hoe gebruik ik box-shadow voor kaart-elevatie?

Material Design definieert elevatieniveaus via toenemende box-shadow-waarden. Een subtiele schaduw duidt op lage elevatie, een sterkere op hoge elevatie voor modalen.

Wordt box-shadow ondersteund in alle browsers?

box-shadow wordt ondersteund in alle moderne browsers sinds IE9. Geen vendor-prefixen nodig.

Box Shadow
Generator

Ontwerp perfecte CSS box-shadows met live voorbeeld. Pas offset, blur, spread en kleur aan — stapel meerdere lagen voor diepte.

Offset · Blur · SpreadMulti-laag schaduwenCSS-ready

① Pas X, Y, blur, spread aan ② Voeg tot 3 lagen toe ③ Kopieer de CSS

Presets:

Laag 1

Horizontale offset: 5px

Verticale offset: 10px

Blur-straal: 20px

Spread-straal: 0px

Schaduwkleur

#000000

Dekking: 0.25

Inset-schaduw

Gegenereerde CSS

box-shadow: 5px 10px 20px 0px rgba(0, 0, 0, 0.25);

Offset

X- en Y-offset bepalen de schaduwrichting. Positieve X duwt naar rechts, negatief naar links. Positieve Y duwt naar beneden.

Blur & Spread

Blur-straal verzacht de schaduwranden (0 = scherp). Spread vergroot of verkleint de schaduw buiten de elementgrenzen.

Inset

Inset-schaduwen verschijnen binnen het element en creëren een ingedrukt effect in plaats van een buitenste schaduw.

CSS box-shadow — hoe het werkt en wanneer je het gebruikt

De CSS-eigenschap box-shadow voegt schaduweffecten toe rond het kader van een element. Het accepteert horizontale offset (X), verticale (Y), blur-straal, spread-straal en kleur. Gebruik rgba() met gedeeltelijke dekking (0.1–0.25) voor zachte, realistische schaduwen. Het sleutelwoord inset plaatst de schaduw binnen het element. Stapel meerdere schaduwen met kommagescheiden waarden voor Material Design elevation of neumorfisme-effecten. box-shadow beïnvloedt de layout niet en is GPU-composited — anders dan filter: drop-shadow(), dat het alfakanaal volgt.

Veelgestelde vragen

De CSS-eigenschap box-shadow voegt schaduweffecten toe rond het kader van een element. Je kunt meerdere schaduwen instellen met kommagescheiden waarden.

box-shadow: X Y blur spread kleur. X en Y verschuiven de schaduwpositie. Blur verzacht de randen. Spread vergroot (positief) of verkleint (negatief) de schaduwgrootte voor het blur-effect.

box-shadow volgt het rechthoekige boxmodel van het element. filter: drop-shadow() respecteert het alfakanaal en de werkelijke vorm, geschikt voor transparante PNG's en SVG's.

"inset" plaatst de schaduw binnen de elementrand in plaats van erbuiten, wat een ingedrukt effect creëert.

Nee. box-shadow beïnvloedt de layout niet en neemt geen ruimte in de documentstroom in. Het is puur visueel.

Realistische schaduwen gebruiken rgba() met lage dekking (0.1–0.3), gematigde blur (15–30px), geen spread en een kleine positieve Y-offset. 2–3 gestapelde schaduwen geven het meest natuurlijke resultaat.

Ja. box-shadow wordt ondersteund door alle grote browsers sinds IE9 zonder vendor-prefixen.

CSS box-shadow — hoe het werkt en wanneer je het gebruikt

Veelgestelde vragen

Ontdek ons netwerk