RizCraft Logo RizCraft

CSS Box Shadow Generator

Design single or stacked box shadows visually and copy production-ready CSS instantly.

Shadow Layers

0px
10px
20px
0px
25%
Inset (inner shadow)

Preview Background

CSS Output

Similar CSS Tools

See All
Image Color Extractor
Upload an image and get its full color palette as HEX/RGB swatches
Color Shades Generator
Generate tints, shades, and saturation variations from any base color
CSS Gradient Generator
Design linear, radial, and conic CSS gradients with a live preview
Browser extension

Keep RizCraft tools one click away

Open 24 built-in tools from your browser sidebar, use quick actions from the right-click menu, and reach every RizCraft tool without hunting through tabs.

Add to Chrome Explore the extension

Firefox and Edge versions are coming next. Free to install

Free CSS Box Shadow Generator — Single & Stacked Shadows

Design a CSS box-shadow visually — set the horizontal and vertical offset, blur, spread, color, and opacity, then copy the generated code straight into your stylesheet. Add extra layers to build the soft, stacked shadows common in modern card and button designs — real CSS supports any number of comma-separated shadows on one element.

Toggle Inset to switch between an outer drop shadow and an inner shadow that reads as a pressed or recessed surface, useful for form fields and toggle switches.

Frequently Asked Questions

Can I stack more than one shadow?
Yes. Click "+ Add Layer" to add another shadow — each layer becomes one comma-separated value in the final box-shadow declaration.
What does spread radius do?
Positive values grow the shadow's shape beyond the element's edges before blur is applied; negative values shrink it, which is handy for a tight glow.
Does this need vendor prefixes?
No, box-shadow is supported unprefixed in every modern browser.