CSS Box Shadow Generator
Layers:
Horizontal: 4px
Vertical: 4px
Blur: 12px
Spread: 0px
Color:
Opacity: 25%
Preview
CSS Output
1.
Use the sliders to adjust horizontal offset, vertical offset, blur, and spread
2.
Pick a shadow color and set opacity
3.
Use the Background color picker in the preview header to change the backdrop and see how the shadow looks on different surfaces
4.
Add additional shadow layers for more complex effects
5.
Copy the CSS output and paste it into your stylesheet
▸
Designing card or button shadows for web UI components
▸
Creating layered shadow effects that mimic material depth
▸
Quickly generating inset shadows for pressed or inset elements
▸
Copying production-ready CSS without writing it by hand
Can I stack multiple shadows?
Click the + icon button next to the layer tabs to add a new shadow layer. CSS supports comma-separated box-shadow values, and layers are combined in order.
What is an inset shadow?
An inset shadow appears inside the element rather than outside, creating a pressed or recessed visual effect.
What do the blur and spread values do?
Blur controls how soft the shadow edges are. Spread expands or contracts the shadow size independently of the offset - a positive spread makes the shadow larger than the element.
Is my data sent to a server?
All generation runs locally in your browser. No data is transmitted anywhere.
Can I change the preview background color?
Yes. Use the Background color picker in the preview panel header to set any backdrop color. This lets you test how the shadow looks on light, dark, or colored surfaces.
How do I use the output in my CSS?
Click Copy to copy the complete CSS declaration (e.g., box-shadow: 4px 4px 12px 0px rgba(0, 0, 0, 0.25);) and paste it directly into your CSS rule.