Hub Box Shadow Generator
🌑

Box Shadow Generator

Craft stunning multi-layer CSS box shadows with live preview. Stack up to 5 layers, pick colours with alpha, and copy production-ready CSS instantly.

Preview Box
Width
px
Height
px
Radius
px
BG Color
Shadow Layers
Live Preview Updates instantly
Generated CSS 

        

      


      
      

        

          Preset Gallery
        

        

      


    

  


  

    
How to use

    
    
      
  1. Tweak offset (X/Y), blur, spread, and colour for each layer — values update live.
    2. 
      
  2. Add 2–3 stacked layers at different opacities to simulate realistic Material-style elevation.
    3. 
      
  3. Click Copy to grab the full box-shadow: value and paste into your stylesheet.
    4. 
    

  


  

    
FAQ

    

      
      
box-shadow follows the element's rectangular box (and border-radius). filter: drop-shadow() follows the visual silhouette including transparent PNG areas — useful for logos and irregular shapes.

    

    

      
      
A tight close shadow plus a wide soft shadow mimics how real light scatters, giving a much more believable sense of depth than a single shadow.

    

    

      
      
Yes — toggle the Inset switch inside any layer. Inset shadows render inside the element's border, useful for pressed-button states and inner glows.