CSS Box Shadow Generator
Design layered box shadows with live preview and copy the exact CSS.
Build CSS Box Shadows with a Live Preview
A box shadow takes four numbers and a colour, and the difference between a shadow that looks expensive and one that looks cheap is entirely in how those five values relate. Real shadows are soft, offset mostly downwards, and far more transparent than people expect — a common mistake is a hard black shadow at full opacity.
This generator gives you sliders for each value with an immediate preview, so you can develop an eye for the relationship rather than guessing at numbers in a stylesheet and reloading.
Key features
- Live preview — every adjustment is visible instantly on a real element.
- All five parameters — horizontal and vertical offset, blur, spread and colour with opacity.
- Inset mode — switch to an inner shadow for pressed or recessed effects.
- Negative spread — the trick behind the tight, natural shadows used in modern interfaces.
- Copy-ready declaration — the complete
box-shadow:rule.
This tool runs entirely inside your browser using native Web APIs. Your files and text are never uploaded to a server, never logged and never shared with third parties.
How to use: CSS Box Shadow Generator
- Set the offsets
Vertical offset alone usually reads as natural, because real light tends to come from above. - Increase the blur
Larger blur suggests a more distant or softer light source. Blur roughly two to three times the vertical offset looks natural. - Try a negative spread
Pulling the shadow in slightly keeps it tight to the element and stops large blurs looking like fog. - Lower the opacity
Most convincing shadows sit between 10% and 30%. Full-opacity black almost always looks wrong.
Technical specifications
| Processing location | Entirely in your browser — no server round trip |
|---|---|
| Data uploaded | None. Files and text never leave your device |
| Price | Free — no account, no trial, no usage cap |
| Category | Design |
| Works offline | Yes, once the page has loaded |
| Browser support | Chrome 90+, Edge 90+, Firefox 90+, Safari 15+ |
| Interface languages | English, 中文, हिन्दी, Español, العربية |
Frequently asked questions
What do the four box-shadow numbers mean?
In order: horizontal offset, vertical offset, blur radius and spread radius. Positive horizontal moves the shadow right, positive vertical moves it down. Blur softens the edge; spread grows or shrinks the shadow before blurring.
How do I make a realistic shadow?
Offset mostly downward, use a blur two to three times the offset, apply a small negative spread, and keep opacity between 10 and 30%. Layering two or three shadows at different blurs mimics real light far better than one large shadow.
What does inset do?
It draws the shadow inside the element instead of outside, making the box look recessed. It is the standard way to style pressed buttons and inset form fields.
Are box shadows expensive to render?
Large blur radii on many elements can cost repaint time, especially on mobile. For a shadow that animates, prefer transitioning opacity on a pseudo-element rather than animating the box-shadow property itself.