CSS Box Shadow Generator
Adjust the sliders to build a box shadow visually, layer multiple shadows for depth, or start from a preset. Copy the CSS when you're happy with the result.
Layering multiple shadows
Every layer above becomes one comma-separated box-shadow value —
that's how effects like neumorphism get their depth: one lighter shadow
offset toward the light source, and one darker shadow offset away from
it. Click + Add layer to stack more, click a layer chip
to select and edit it, and remove any layer you don't need. Some
presets (like Soft UI and Accent Glow) are intentionally single-layer;
Neumorphism sets up two layers automatically.
Frequently asked questions
How do I create a neumorphic (soft UI) shadow in CSS?
Neumorphism needs two shadows on the same element: a light shadow offset toward your light source, and a darker shadow offset away from it, both with a fairly large blur and low opacity against a background close in color to the element itself. That's exactly what the Neumorphism preset above sets up — click it, then add more layers if you want to fine-tune the effect further.
What's the difference between blur and spread in box-shadow?
Blur controls how soft/diffused the shadow's edge is — higher blur spreads the shadow color out over a larger, fainter area. Spread grows or shrinks the shadow's shape before that blur is applied — positive spread makes the shadow larger than the element, negative spread pulls it in tighter (useful for subtle depth without a halo effect).
Can I use multiple box-shadows on one element?
Yes — box-shadow accepts a comma-separated list of shadows, and the browser renders them all, with the first one listed on top. This tool's "Add layer" button builds exactly that: add as many layers as you need and the generated CSS combines them into one comma-separated declaration automatically.
What does the inset keyword do?
Adding inset draws the shadow inside the element's border box instead of outside it, which is how you create pressed-button or recessed/inner-shadow effects. Check the "Inset shadow" box on any layer to try it — it's common to combine one inset layer with one regular outer layer for a convincing pressed state.
Why does my shadow look too harsh or pixelated?
This usually means the blur is too low relative to the opacity — a small blur with high opacity reads as a hard-edged gray block rather than a soft shadow. Try increasing blur and lowering opacity together; most natural-looking shadows use a blur roughly 2-3x the offset distance.
Does box-shadow affect page layout or accessibility?
No — box-shadow is purely visual and never changes an element's box size or affects surrounding layout, unlike border or outline. One accessibility note: if you're using shadow alone to indicate something is clickable or elevated (like in neumorphic UI), pair it with a visible focus outline and sufficient color contrast, since very subtle shadows can be hard to perceive for low-vision users.