About this tool
The box-shadow property is deceptively deep: offset, blur, spread, colour and the inset keyword all interact, and real depth usually comes from stacking several shadows. This generator gives you a slider for each value and lets you add multiple layers, so you can build anything from a subtle card lift to a bold neumorphic effect.
Everything updates in a live preview, and the finished box-shadow CSS is one copy away. It runs entirely in your browser.
Frequently asked questions
Does it support multiple stacked shadows?
Yes. Click 'Add Layer' to stack extra shadows — they're combined into one comma-separated box-shadow value, with the first layer rendered on top.
What does the 'inset' checkbox do?
It switches that layer from an outer drop shadow to an inner shadow that appears inside the element's border, useful for pressed or recessed effects.
How is shadow transparency handled?
The opacity slider is combined with the color picker into an 8-digit hex color (#rrggbbaa) so you get real alpha transparency, since the color input alone can't hold an alpha channel.
Is my design data uploaded anywhere?
No, the shadow preview and CSS output are generated entirely in your browser — nothing is uploaded or stored on a server.
What does a negative spread value do?
A negative spread shrinks the shadow's shape before blurring, which is commonly used to make a shadow look thinner or tighter than the element itself.