CSS Box Shadow Generator
Build soft, hard, or layered box shadows visually — stack up to 4 shadow layers on one element.
box-shadow: 0px 10px 25px -3px rgba(0,0,0,0.3);Layer 1
Tip: press Space to randomize all layers.
How to use this tool
- Adjust X/Y offset, blur, and spread with the sliders.
- Pick a shadow color and toggle inset if needed.
- Click 'Add shadow layer' to stack multiple shadows for more depth.
- Copy the generated CSS and paste it into your stylesheet.
FAQ
Can I stack multiple box shadows?
Yes, add up to 4 layers — CSS box-shadow natively supports comma-separated layers for realistic depth.
What does inset do?
Inset flips the shadow to render inside the element's border instead of outside it.