Box Shadow-generator
De box shadow generator bouwt een CSS box-shadow met schuifregelaars voor X- en Y-offset, blur, spread, kleur, dekking en inset, plus presets van Material Design en Tailwind, en geeft de exacte CSS.
Over deze tool
De box shadow generator bouwt een CSS box-shadow met schuifregelaars voor X- en Y-offset, blur, spread, kleur, dekking en inset, plus presets van Material Design en Tailwind, en geeft de exacte CSS.
Zo gebruik je het
- Begin met een preset of houd Custom aan.
- Pas X/Y-offset, blur, spread en dekking aan.
- Kies de schaduwkleur en vink Inset aan voor een binnenschaduw.
- Klik op Copy CSS om de box-shadow-regel te plakken.
Goed om te weten
- De syntax van box-shadow is: [inset] offset-x offset-y blur-radius spread-radius color.
- Een grotere blur-radius maakt de rand zachter; spread laat de schaduw groeien of krimpen vóór het vervagen.
- Donkere schaduwen met lage dekking (ongeveer 10–25%) ogen natuurlijker dan effen zwart.
- Je kunt meerdere schaduwen stapelen door ze met komma's te scheiden.
- Het keyword inset tekent de schaduw binnen de rand van het element.
Werkt volledig in je browser — niets wat je invoert wordt geüpload of opgeslagen.
Veelgestelde vragen
Hoe geef ik een div een schaduw in CSS?
Gebruik de eigenschap box-shadow, bijvoorbeeld box-shadow: 0 4px 12px 0 rgba(0,0,0,0.2); deze tool schrijft de waarde voor je.
Wat is het verschil tussen blur en spread?
Blur bepaalt hoe zacht de rand van de schaduw is. Spread vergroot of verkleint de schaduw voordat de blur wordt toegepast.
Hoe maak ik een binnenschaduw?
Zet het keyword inset aan het begin van de waarde, of vink Inset aan in de tool.
Kan ik meerdere box shadows gebruiken?
Ja. Scheid schaduwen met komma's; gestapelde schaduwen, zoals in de presets van Material en Tailwind, ogen realistischer.