Box Shadow Generator
Genereer CSS box-shadow met live preview.
CSS
Wat doet deze tool?
Bouwt CSS box-shadows visueel: pas offset, blur, spread en kleur aan, en kopieer de gegenereerde 'box-shadow'-declaratie.
Hoe werkt de berekening?
De 5 parameters van box-shadow (x-offset, y-offset, blur-radius, spread-radius, kleur) worden gecombineerd tot: 'box-shadow: 4px 6px 10px 0 rgba(0,0,0,0.15);'. De preview toont het effect live op een testblok.
Een concreet voorbeeld
x 4px, y 6px, blur 10px, spread 0, kleur zwart 15% → 'box-shadow: 4px 6px 10px 0 rgba(0,0,0,0.15);'. Geeft een subtiele, moderne schaduw.
Veelgestelde vragen
Wat doet 'spread'?+
Vergroot (positief) of verkleint (negatief) de schaduw voor je hem blurt. Handig voor glow-effecten.
Kan ik meerdere schaduwen stapelen?+
Ja, gescheiden door komma's: 'box-shadow: 0 1px 2px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.05);'. Zo maak je diepte.
Wat is de 'inset'-optie?+
Zet de schaduw binnenin het element in plaats van erbuiten. Handig voor ingedrukte knoppen.