CSS Box Shadow Generator
Design smooth, realistic drop shadows visually with live preview and cross-browser CSS output.
Presets
Horizontal Offset (X)
0px
Vertical Offset (Y)
16px
Blur Radius
30px
Spread Radius
-4px
Shadow Color
Preview Box
Generated CSS
box-shadow: 0px 16px 30px -4px rgba(79, 70, 229, 0.3);How to Use the CSS Box Shadow Generator
1
Adjust Sliders
Modify X and Y offsets, blur radius, and spread to craft the exact depth you need.
2
Pick Color & Alpha
Select any brand color and tune opacity for natural, ambient glow effects.
3
Copy CSS Snippet
One-click copy the standard CSS rule directly into your stylesheet or Tailwind config.
Frequently Asked Questions
What does a negative spread radius do?
A negative spread radius shrinks the shadow size, creating softer and more realistic elevation shadows like those seen in modern Apple or Stripe interfaces.
Is box-shadow supported on all modern browsers?
Yes, CSS box-shadow is universally supported in all modern web browsers without any vendor prefixes needed.