Free Box Shadow Generator
This shadow builder previews box-shadows as offsets, blur, spread, colour and inset change. It is designed for cards, buttons and modals that need depth without guesswork. Copy the declaration when it looks right. Nothing is uploaded.
How it works
Offsets move the shadow, blur softens it, spread grows or shrinks it, and inset flips it inside the box. Layered shadows (comma-separated) look most natural; start from one soft layer and add a tighter second layer for depth.
Example
| Settings | CSS |
|---|---|
| 0 8 24 rgba(11,31,58,.18) | Soft card lift |
Frequently asked questions
What do the four lengths mean?
Horizontal and vertical offset, then blur softness, then spread size, in that order.
What is inset for?
Shadows pressed inside the box: input fields, pressed buttons, inner panels.
Why do my shadows look muddy?
Over-large blur with dark opaque colour. Use translucent colour and moderate blur.
Do shadows hurt performance?
Large blurred shadows on many animating elements can. Static card shadows are fine.
Is anything uploaded?
No. Everything renders locally in your browser.
Related tools
- CSS Button Generator , button depth.
- CSS Gradient Generator , coloured card backgrounds.
- CSS Starter Generator , shadow tokens.
- Guide: Small Business Digital Toolkit