CSS Box Shadow Generator — Free Online Tool
Create CSS box shadows visually online for free. Set offset, blur, spread, colour, and inset. Preview live and copy the CSS code. No signup needed.
About CSS Box Shadow Generator
Box shadows add depth and dimension to web elements. Our visual CSS box shadow generator lets you create single or multiple layered box shadows by adjusting X and Y offset, blur radius, spread radius, shadow colour and opacity, and inset toggle — all with a live preview. Multiple shadow layers can be added and stacked for complex effects. The complete CSS box-shadow property value is generated in real time and can be copied directly into your stylesheet.
Frequently Asked Questions
What parameters does the box shadow tool control?
Horizontal offset (X), vertical offset (Y), blur radius, spread radius, shadow colour with opacity, and inset toggle.
Can I add multiple box shadows?
Yes — add multiple shadow layers and they are combined into a single CSS box-shadow property.
What is an inset shadow?
An inset shadow appears inside the element rather than outside, creating a pressed-in or recessed look.
Does box-shadow work on all elements?
Yes — box-shadow works on any HTML element.
What is the difference between box-shadow and drop-shadow filter?
box-shadow follows the element's box model. filter: drop-shadow() follows the element's actual shape including transparency.