CSS Tools
Box Shadow Generator
Build CSS box-shadow with live preview - any offset, blur, spread and colour.
Live preview
Shadow 1
CSS
box-shadow: 0px 10px 25px -5px #00000033;
About this tool
Tweak X / Y offset, blur radius, spread radius and colour to design any box-shadow. Toggle between outer drop shadow and inset, stack multiple shadows for layered depth, and copy the ready-to-paste CSS. Everything renders live in your browser so you can iterate until it looks right.
FAQs
What do the four box-shadow values mean?
Horizontal offset, vertical offset, blur radius, and spread radius - in that order. Positive offsets push the shadow right and down; blur softens the edges; spread grows or shrinks the shadow before blur is applied.
Can I stack multiple shadows?
Yes - the box-shadow property accepts a comma-separated list. The generator lets you add as many shadows as you need, layered front-to-back from first to last.
What's the difference between outer and inset shadows?
Outer (default) draws outside the element's border, like a drop shadow. Inset draws inside the border, creating a punched-in or bevelled look. Toggle with the 'inset' checkbox.
Will big spread / blur values hurt scroll performance?
On large elements, yes - shadows force compositor work each frame. For decorative shadows on hot scrolling regions, convert to a pre-rendered image or use will-change: transform sparingly.
Does this support filter: drop-shadow()?
It only generates box-shadow. For drop-shadow on irregular shapes (PNGs, SVGs) use filter: drop-shadow() instead - it follows the alpha channel rather than the bounding box.