Free Tool

CSS Box Shadow Generator

Stack multiple shadow layers, drag the sliders, and copy the CSS — no install, no sign-up, everything runs in your browser.

Presets

Generated CSS

 
 
 
 
  
 
 
How CSS box-shadow works
 
 box-shadow takes an offset-x, offset-y, blur radius, spread radius, and a color — plus an optional inset keyword to flip the shadow inward.

 
     
  • Offset X/Y: how far the shadow shifts horizontally and vertically. Negative values shift up or left.
    •  
  • Blur: higher values soften and spread the shadow's edges. Zero gives a crisp, hard edge.
    •  
  • Spread: grows or shrinks the shadow's shape before blurring is applied.
    •  
  • Layers: stack multiple shadows separated by commas for depth — the first one listed sits on top.
    •  
 

Stick to one or two light-direction-consistent layers for most UI — stacking too many shadows at once usually reads as muddy rather than deep.

 
 
  
 
 
Copying shadows off a live site instead?
 
UICuts' element inspector grabs the exact box-shadow, border-radius, and every other computed style straight from any page — then hands it to your AI coding tool.
    
Get Started Free