Free CSS Tool — No Signup Required

CSS Box-Shadow Generator

Layer multiple shadows, adjust offset, blur, spread and color with live preview. Copy production-ready CSS instantly.


      

    

    
  






  
How to Use the Box-Shadow Generator

  

    
1
Adjust One Layer
Set offset, blur, spread, color and opacity for the default shadow layer.

    
2
Add More Layers
Stack 2-3 shadows with different blur/opacity for a realistic, soft elevation.

    
3
Try Inset
Toggle inset to draw the shadow inside the box instead of outside.

    
4
Copy the CSS
One click copies the full box-shadow property with every layer.

  






  
Frequently Asked Questions

  
What do the box-shadow values mean?
box-shadow takes offset-x, offset-y, blur-radius, spread-radius, and color, in that order. Offset-x/y move the shadow horizontally/vertically, blur softens its edges, spread expands or shrinks it before blurring, and inset (if present) draws it inside the element's border instead of outside.

  
Can an element have more than one box-shadow?
Yes — box-shadow accepts a comma-separated list of shadows, stacked in the order written (the first is on top). Layering 2-3 shadows with different blur and opacity is how most realistic, soft elevation effects are built.

  
What's the difference between box-shadow and drop-shadow filter?
box-shadow follows the element's box shape (rectangle, or rounded if border-radius is set) regardless of what's rendered inside. filter:drop-shadow() follows the actual visible shape of the content, including transparency — useful for shadows behind non-rectangular PNG or SVG shapes.






  
Ready-Made Templates with Elevation Built In

  
UIXDraft includes 180+ HTML/CSS templates with card shadows, modals, and depth systems already designed and production-ready.

  Get 180+ Templates — $35 One-Time
  
Commercial license · Instant download · One payment · No subscription