Box Shadow Generator
Drag offset, blur, spread, and color sliders to see the shadow update live. Stack multiple layers for richer, material-style depth.
Shadow layers
How to Use
Set X/Y offset, blur, spread, color, and inset for each layer. Sliders update the preview immediately.
Stack up to 5 shadow layers with the + button. Multi-layer shadows make the soft, material-style depth most designs use.
Copy the resulting box-shadow declaration with one click. The preview also reflects background and border-radius for context.
FAQ
How many layers can I add?
Up to 5. Material and neumorphism effects usually need just 2–3.
What does inset do?
Inset draws the shadow inside the box rather than outside — useful for pressed-button or carved-well effects.
What does negative spread do?
A negative spread shrinks the shadow inward, exposing it from only one edge — great for subtle shadows.
box-shadow vs filter: drop-shadow?
box-shadow draws around the element's rectangle. filter: drop-shadow follows the actual visible shape (good for transparent PNG/SVG). For rectangles, box-shadow is lighter.
Is anything sent to a server?
No. Everything happens in your browser; the CSS never leaves the page.
