CSS Box Shadow Generator — Visual, With Honest Presets
Dial in a shadow with sliders — or start from presets that follow how light actually works.
🔒 Runs in your browser — files never uploaded ⚡ No signup 💯 Free
Design CSS box shadows with live sliders for offset, blur, spread, colour and opacity — plus presets worth stealing: subtle borders-with-depth, card elevation, floating modals, inset wells, and the layered multi-shadow that makes interfaces look expensive.
The CSS under the preview is exactly what's painting the box above it.
How to use Box Shadow Generator
- Start from a preset close to what you need.
- Adjust the sliders. Vertical offset and blur do most of the work; spread usually wants to be slightly negative.
- Keep opacity low. Real shadows are around 10–30% black, not 75%.
- Copy the CSS.
The rules that make shadows look real
- Light comes from above: positive vertical offset, zero-ish horizontal. A shadow going up reads as wrong without the viewer knowing why.
- Soft and light beats hard and dark: more blur, less opacity. The single most common mistake is a near-black shadow at low blur — that's an outline, not depth.
- Negative spread tightens: pulling spread slightly negative (−4 to −8) keeps a big blur from leaking out sideways — it's what makes the "floating" preset crisp.
Why the layered preset looks better
Real shadows aren't one gradient — ambient light and the direct source produce overlapping penumbras. Stacking three or four soft shadows at increasing offsets (1px, 4px, 16px, 32px, each ~10% opacity) approximates that, and it's the technique behind every polished design system's elevation scale. The Layered preset gives you the stack; tune the colour to your background.
Dark mode note
Shadows barely read on dark backgrounds — there's nothing darker to cast. Dark UIs signal elevation by lightening the surface instead. If your design has both themes, plan for shadow-in-light, lighter-surface-in-dark rather than forcing one shadow to serve both.
Frequently asked questions
Why does my shadow look like a dirty outline?
Too dark and too tight — the classic. Raise the blur, drop the opacity to 10–30%, and give it a small positive vertical offset. A shadow should be something you sense, not something you see.
What does spread actually do?
It grows (positive) or shrinks (negative) the shadow before the blur applies. Slightly negative spread is the professional trick: it stops a big soft blur from leaking out sideways, keeping elevation without a halo.
Why do polished UIs stack several shadows?
Because real light produces overlapping soft penumbras, not one gradient. Three or four low-opacity shadows at increasing offsets read as genuine depth — that's the Layered preset. It costs nothing meaningful to render.
Do box shadows hurt performance?
Static shadows: no. Animating them: yes — the blur repaints every frame. Animate opacity on a pseudo-element carrying the shadow instead, the standard trick for hover elevation at 60fps.
What about shadows in dark mode?
They barely register — there's little darker to cast onto. Dark UIs signal elevation by lightening the raised surface instead. Design shadow-for-light and surface-tint-for-dark rather than forcing one shadow to do both.