CSS Box-Shadow Generator
Build CSS box-shadows visually — offset, blur, spread, color and inset — stack multiple layers, preview live and copy the code.
box-shadow: 0px 8px 24px -4px rgba(0, 0, 0, 0.25);About the CSS box-shadow generator
Build CSS box-shadows visually — set the horizontal and vertical offset, blur, spread and color, toggle inset, and stack multiple shadows for depth. A live preview shows the effect and the generated CSS updates as you adjust.
Copy the declaration straight into your stylesheet. It all runs in your browser.
Offset X/Y, blur, spread, color and opacity.
Layer multiple shadows for realistic depth.
Toggle inner shadows for pressed/recessed effects.
Live-updating box-shadow declaration.
Frequently asked questions
What do the box-shadow values mean?
In order: horizontal offset, vertical offset, blur radius, spread radius, then color. Positive offsets move the shadow right/down; blur softens it; spread grows or shrinks it.
What does inset do?
Inset draws the shadow inside the element's border, creating a recessed or pressed-in look instead of a drop shadow.
Can I combine multiple shadows?
Yes. CSS allows a comma-separated list of shadows; stacking them is how you build soft, layered depth.
Is the output cross-browser?
Yes. box-shadow is supported in all modern browsers without prefixes.