CSS Box Shadow Generator
Build CSS box-shadow values with offset, blur, spread and color, with a live preview and copy-ready code.
How to use
Start from a preset or one layer, then add layers for depth. Toggle inset for pressed/neumorphic effects. Copy the comma-separated value into box-shadow.
FAQ
Can I stack multiple shadows?
Yes — add layers to combine a soft ambient shadow with a tight contact shadow, or stack colored glows. Each layer has its own offset, blur, spread, color and inset toggle.
What do the presets do?
One-click starting points: Stripe-style card elevation, neumorphism raised/pressed, material depth and a soft glow — tweak sliders after applying.
How do I use the output?
Copy the box-shadow line into your CSS. Multiple layers are comma-separated, exactly as browsers expect.
Last updated: