CSS Box Shadow Generator
Design CSS box shadows visually with live preview, adjustable controls, presets, and copy-ready CSS.
Preview and CSS
Inspect the generated shadow, CSS output, and layer summary.
PreviewCard, button, modal, or image surface
- Shadow layers
- 1
- Inset layers
- 0
- Output length
- 73 chars
CSS snippet
.shadow-box {
box-shadow: 0px 12px 30px -10px rgba(17, 24, 39, 0.22);
}Box-shadow value
0px 12px 30px -10px rgba(17, 24, 39, 0.22)Build production-ready CSS box shadows
Use visual controls to tune depth, softness, color, and inset effects before copying stylesheet-ready CSS.
Box-shadow syntax
A CSS shadow uses horizontal offset, vertical offset, blur radius, spread radius, color, and an optional inset keyword.
Offset vs blur
Offsets move the shadow away from the element. Blur softens the edge without moving the shadow itself.
Spread radius
Positive spread expands the shadow shape, while negative spread tightens it for softer card and modal elevation.
Inset shadows
Inset shadows render inside the element and are useful for input fields, pressed buttons, wells, and recessed panels.
Multiple shadows
Layering shadows lets you combine a close contact shadow with a larger ambient shadow for more natural depth.
Color and opacity
Neutral colors work for most UI, while brand-colored shadows can support buttons, focus states, and glowing dark-mode surfaces.
Examples and common mistakes
Match shadow intensity to the component and avoid effects that make interfaces feel muddy or inconsistent.
Cards
Cards usually need subtle vertical offset, medium blur, negative spread, and a low-opacity neutral color.
Buttons
Buttons benefit from shorter shadows that reinforce elevation without making the control look detached.
Modals
Dialogs and popovers can use larger blur and offset values because they sit above the main page content.
Images
Image shadows should respect the border radius and avoid strong colored glows unless the design system calls for them.
Too much blur
Oversized blur can wash out text-heavy layouts. Reduce opacity or spread before increasing blur again.
Ignoring backgrounds
A shadow that looks good on white may disappear on dark surfaces. Test the preview background before copying CSS.
CSS Box Shadow Generator FAQ
What does the spread radius do?
Spread changes the size of the shadow before blur is applied. Negative spread is common for soft UI shadows because it keeps the shadow close to the element.
Can CSS use multiple box shadows?
Yes. Separate shadow layers with commas. The generator keeps each layer editable and outputs the combined value.
When should I use inset shadows?
Use inset shadows for recessed surfaces such as inputs, pressed buttons, containers, and panels that need internal depth.
Are my shadow values uploaded?
No. Shadow generation, validation, previewing, copying, and downloads run in the current browser tab.