Box Shadow Generator
Design CSS box-shadows with a live preview and copy-ready code.
About Box Shadow Generator
Build Better Shadows
Use this tool to generate modern, layered shadows for cards, buttons, modals, and UI components. Adjust offsets, blur, spread, inset, and opacity, and see the result instantly.
What you can do
- Add multiple shadow layers for realistic depth.
- Create inset shadows for pressed and recessed effects.
- Copy the box-shadow value, a full declaration, or a ready-to-paste snippet.
- Generate a share link so teammates can tweak the same shadow.
Tips
- Use lower opacity and larger blur for softer, more natural shadows.
- Try negative spread to keep shadows tight and avoid a cloudy look.
- Stack two subtle layers instead of one heavy one for better results.
FAQ
What is CSS box-shadow?
box-shadow adds one or more drop shadows around an element box. You can control offset, blur, spread, color, and inset shadows.
Can I stack multiple shadows?
Yes. Separate multiple shadows with commas to create layered effects (soft lift, depth, outlines, and more).
What is the difference between blur and spread?
Blur controls how soft the shadow edge is. Spread grows or shrinks the shadow size before blur is applied.
What does inset do?
Inset draws the shadow inside the element instead of outside, often used for pressed or recessed effects.
Is anything uploaded?
No. This tool runs locally in your browser.
More CSS Tools
Clean up your styles after you nail the shadow.
CSS BeautifierCSS MinifierCSS Gradient GeneratorTo build out the rest of the look and feel, try Border Radius Generator and Color Converter (HEX/RGB/HSL).
Related Tools
More tools you may find useful.
Browser Extension
