Back to Tools
CSS Box Shadow Generator
Box Shadow Generator
Design perfect shadows with depth and realism
Shadow Master
Visual Result
About the CSS Box Shadow Generator
Design layered box shadows visually and copy the CSS.
How to use the CSS Box Shadow Generator
- Choose a Quick Preset (Soft Depth, Hard Edge, Neumorphic or Deep Inset), or adjust the settings for each layer.
- Use Add Layer for multiple shadows and pick the Preview Background and Box Color.
- Press Generate Shadow CSS, then Copy CSS.
Formula and method
box-shadow: offset-x offset-y blur spread color, for example 0 4px 6px rgba(0,0,0,0.1). Add inset for an inner shadow.
When to use the CSS Box Shadow Generator
- Giving cards, buttons and modals a sense of depth.
- Building inset shadows for input fields and pressed buttons.
- Creating soft, layered shadows that look more natural than a single dark one.
- Trying a neumorphic (soft, raised) design before coding it.
Common mistakes to avoid
- Using a strong, black shadow with no blur. Soft, low-opacity shadows look more polished.
- Adding many heavy shadows to a page, which can slow rendering on low-powered phones.
- Forgetting that a shadow does not take up space and can be clipped by a parent element with overflow hidden.
Tips
- Soft, low-opacity shadows look more natural.
- Layering two shadows gives more realistic depth.
- Keep the opacity between about 5% and 20% for a subtle look.
- Combine a small, sharp shadow with a larger, softer one for realistic depth.
Frequently Asked Questions
Yes. Separate shadows with commas, or use Add Layer.
Horizontal offset, vertical offset, blur radius and spread radius, followed by the colour.
Add the word inset at the start of the shadow declaration.
Yes. Separate shadows with commas, or use Add Layer in the tool.