CSS Box Shadow Generator

Create, preview, customize, and copy beautiful CSS box shadows in real time.

Inspired by popular shadow example galleries and built for real UI work.

Start Creating Browse Presets
Shadow
Horizontal Offset 0px
Vertical Offset 10px
Blur Radius 30px
Spread Radius 0px
Opacity 0.15
Color
#000000
Inset
Preview
Border Radius 12px
Background
UI Component
Preview Card
See how this shadow looks on a real card component in your design.
Generated CSS

      


    

  


  
  

  
  

    

      

        
Frequently Asked Questions

        
Everything you need to know about CSS box shadows.

      

      

        

          
What is the CSS box-shadow property?

          

            
The box-shadow CSS property adds shadow effects around an element's frame. Syntax: box-shadow: offset-x offset-y blur-radius spread-radius color. The inset keyword makes the shadow appear inside. Multiple shadows can be stacked by separating with commas.

          

        

        

          
How do I create an inset box shadow?

          

            
Add the inset keyword before the shadow values: box-shadow: inset 0 2px 8px rgba(0,0,0,0.2). Inset shadows appear inside the element — useful for pressed button states, recessed inputs, or inner depth effects.

          

        

        

          
Can I stack multiple CSS box shadows?

          

            
Yes — separate multiple shadow values with commas: box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 8px 24px rgba(0,0,0,0.15). Shadows render front-to-back, first value on top. Layering shadows creates more natural, multi-depth effects.

          

        

        

          
Why is my box shadow not showing?

          

            
Common causes: overflow: hidden on a parent clips the shadow; a higher z-index element covers it; the shadow color matches the background; or the element has no defined size. Ensure the element has a visible background and sufficient padding.