Back to tools
Box Shadow Generator
Design layered CSS box shadows with a live preview. Stack multiple shadows and copy the CSS.
Shadow 1
#000000
Horizontal (X)0px
Vertical (Y)8px
Blur24px
Spread-4px
Opacity0.20
box-shadow: 0px 8px 24px -4px rgba(0, 0, 0, 0.2);
About This Tool
Box Shadow Generator creates CSS box-shadow declarations visually. Adjust horizontal offset, vertical offset, blur radius, spread radius, and color. Layer multiple shadows on top of each other for complex depth effects.
Layered shadows are a key technique in modern UI design. A combination of a primary shadow and a softer ambient shadow creates more natural-looking depth than a single shadow. The tool shows a live preview of the stacked effect.
Copy the generated CSS property with one click. The output is standard CSS box-shadow syntax that works in all modern browsers.