About CSS Box Shadow
The box-shadow CSS property draws a shadow behind any element. It accepts up to five values — horizontal offset, vertical offset, blur radius, spread radius and colour — plus the optional inset keyword to flip the shadow to the inside of the element. Multiple shadows can be stacked by separating them with commas, which is how modern, realistic elevation effects are built.
Done well, shadows suggest depth and focus. Done badly, they look artificial. This generator gives you all the controls you need to make them look natural, with a live preview on different backgrounds so you can see how they hold up in real layouts.
The five box-shadow values
| Value | What it does |
|---|---|
| X offset | Horizontal shift. Positive moves right, negative moves left. |
| Y offset | Vertical shift. Positive moves down (shadows usually fall downward). |
| Blur | Softens the edge. 0 = hard edge, larger = fuzzier and softer. |
| Spread | Grows or shrinks the shadow before blur. Positive expands, negative contracts. |
| Colour | Any CSS colour. Almost always uses alpha for a soft translucent look. |
Add inset at the start to flip the shadow inward — used for input fields, pressed buttons and recessed surfaces.
How to make shadows look good
- Lower the alpha. Real shadows are subtle. Use
rgba(0, 0, 0, 0.08)to0.15, not solid black at full opacity. - Layer two or three shadows. A tight shadow defines the edge, a wider soft shadow adds depth. This is how Material Design elevations work.
- Push the shadow down. Light usually comes from above, so a positive Y offset (3–15px) reads as natural; a zero-Y shadow looks like a glow.
- Colour the shadow. Instead of pure black, use a dark tint of the element's own colour. A blue card looks better with a dark-blue shadow.
- Match to elevation. Higher elements (modals, dropdowns) get larger offsets and blurs. Lower elements (buttons, cards) get tighter, smaller shadows.
- Watch blur vs spread. High blur with high spread produces a muddy halo — usually you want one or the other, not both.
Common elevation patterns
| Level | Typical shadow | Use |
|---|---|---|
| Subtle | 0 1px 2px rgba(0,0,0,.06) | Cards, list items, inline elements |
| Medium | 0 4px 12px rgba(0,0,0,.1) | Buttons on hover, floating inputs |
| High | 0 12px 24px rgba(0,0,0,.12) | Dropdowns, popovers, tooltips |
| Modal | 0 24px 48px rgba(0,0,0,.18) | Dialogs, full-screen overlays |
| Inset | inset 0 2px 4px rgba(0,0,0,.06) | Form fields, pressed states |
Common use cases
Cards & panels
Add subtle depth without a border.
Hover states
Lift buttons and list items on interaction.
Modals & dropdowns
Separate overlays from the page below.
Neumorphism
Soft UI pressed-in and raised effects.
Form inputs
Inset shadows for a recessed field look.
Coloured glows
Soft coloured halos behind accent elements.
Privacy and accuracy
This box shadow generator runs entirely in your browser. All generation happens locally in JavaScript with no server calls. The values you enter are never transmitted, stored or logged.