CSS box-shadow generator

Design beautiful box shadows visually — drag sliders for offset, blur, spread, color and inset. Stack multiple layers and copy the ready CSS with one click.

Layers
    Preview
    CSS output
    
            
            
          
    
        
    
      
    
      
     Runs entirely in your browser. Nothing is uploaded.
    
    
    

    
    
      
    How it works
    
      
    
        
    STEP 1
    Tune the sliders
    Adjust X/Y offset, blur, spread, opacity, and color for the active shadow layer. The preview updates in real time.
    
        
    STEP 2
    Add more layers
    Click "Add layer" to stack multiple shadows. Select any layer from the list to edit it, or remove layers you no longer need.
    
        
    STEP 3
    Copy the CSS
    Click "Copy CSS" to copy the complete box-shadow declaration. Paste it straight into your stylesheet.