norito / Box Shadow Generator

Box Shadow Generator

Build a CSS box-shadow visually, with support for multiple stacked layers and inset shadows. 


          
        

      

    



    

      
Related tools

      

        
          CSS Gradient Generator
          Build a linear or radial gradient visually.
        
        
          Border Radius Generator
          Build per-corner border radius visually.
        
        
          Favicon Generator
          Generate a favicon from an image.
        
      

    


    
Common questions

    

      

        What does "Inset" do?
        
Flips the shadow from the outside of the box to the inside, creating a carved-in look instead of a floating one.

      

      

        Can I stack multiple shadows?
        
Yes, click "Add shadow layer" to stack additional shadows, which CSS box-shadow supports natively with comma-separated values. Layering a soft, large shadow with a tighter, darker one is a common way to get a more realistic depth effect.

      

      

        Is this sent anywhere?
        
No, the preview and CSS are generated entirely in your browser. Nothing is uploaded.