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.
Box shadow syntax in one line
A CSS box-shadow is short: horizontal offset, vertical
offset, blur radius, spread radius, then the color. A positive vertical
offset moves the shadow down, a positive spread grows it in every
direction, and a larger blur softens the edge. Add inset
and the shadow is painted inside the element instead, which is how
pressed buttons and inner glows are made. The live preview shows the
exact values as you move the sliders, before you commit anything to
your stylesheet.
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.
Getting soft, realistic shadows
Shadows look natural when they are large and low-contrast rather than small and dark. For a card, try a blur roughly 2–3× the vertical offset, use a color with partial opacity instead of pure black, and keep the spread slightly negative so the shadow hugs the element. Two stacked shadows — one tight and sharp, one wide and faint — read as depth better than a single heavy shadow, which is the trick behind most modern interface shadows.
Matching shadows to your palette
A neutral gray shadow works almost anywhere, but tinting it toward your background color makes the effect feel intentional. If you are building from a photo or brand image, pull colors with the palette extractor, then pair the shadow with a background from the gradient generator. The CSS this tool outputs is plain standard syntax, so it drops into any project without a build step.
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.