Design single or stacked box shadows visually and copy production-ready CSS instantly.
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.
Yes. Click "+ Add Layer" to add another shadow — each
layer becomes one comma-separated value in the final box-shadow declaration.
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.
No, box-shadow is supported unprefixed in
every modern browser.
Tell us what to improve or which tool to add next.
