Box Shadow Generator
Visually build CSS box shadows with live preview and code output.
Shadow layers
Build multiple stacked shadows and edit any layer.
Layer controls
Preview
Generated CSS
Frequently Asked Questions
Can I build layered shadows like modern card UIs use?
Yes. Click Add shadow to stack multiple layers, then select a layer from the list to edit its offsets, blur, spread, opacity, and inset state.
Why does the copied CSS use 8-digit hex instead of `rgba()`?
The live preview uses `rgba(...)`, but the copied `box-shadow` string is serialized as `#RRGGBBAA`. Both represent the same color plus alpha.
Can I make an inset shadow?
Yes. Each layer has its own Inset toggle, so you can mix outer and inner shadows in the same stack.
Why won't it let me delete the last shadow layer?
The component enforces at least one shadow so the preview and output never become empty. If you try to remove the final layer, it shows an info status instead.
Does the opacity slider affect every layer?
No. The controls always edit the currently active layer only, which is why selecting the right layer first matters.