CSS Box Shadow Generator
Design a CSS box-shadow with sliders for offset, blur, spread, color and opacity, see it live on a sample element, and copy the ready CSS.
How to use
Drag the sliders for horizontal and vertical offset, blur and spread, pick a color and opacity, and toggle 'inset' for an inner shadow. The preview updates live.
When it looks right, copy the generated box-shadow line straight into your stylesheet. It's standard CSS supported by every modern browser.
FAQ
What do offset, blur and spread do?
Offset moves the shadow horizontally and vertically, blur softens its edges, and spread grows or shrinks its size before blurring.
What is inset?
It draws the shadow inside the element instead of outside, creating an inner or pressed look.
Can I use multiple shadows?
This tool builds one shadow; you can combine several by separating them with commas in your CSS.
Does it work everywhere?
Yes — box-shadow is supported in all modern browsers without prefixes.