Toolzie

CSS Box Shadow Generator

Create beautiful box shadows visually and copy the CSS

CSS Code 

      

    


    
    

      

      

        
        
      

    

  








  

    
How to Use the CSS Box Shadow Generator

    
Adjust offset, blur, spread, color with sliders. Toggle inset. Add multiple. Live preview. Copy CSS.

    
Trial and error is tedious. Visually design shadows and get production CSS instantly.

  

  

    
Frequently Asked Questions

    

      
Multiple?

      
Yes, layer multiple with different values.

    

    

      
Blur vs spread?

      
Blur: soft edges; Spread: expand/contract shadow.

    

    

      
Inset?

      
Inner shadow inside element for pressed effect.

    

    

      
Browser support?

      
Yes, all modern browsers.

    

  











  

    Share:
    
      
    
    
      
    
    
      
    
    
  

  

    Helpful?
    
    
  





















  

    
About This Tool

    
Design CSS box shadows visually with the Toolzie CSS Box Shadow Generator. Adjust horizontal offset, vertical offset, blur, spread, colour, and opacity with live preview — then copy the ready-to-use CSS code.

    
How to Use

    
    

  1. Adjust the shadow sliders: horizontal offset, vertical offset, blur radius, and spread.
    2. 

  2. Pick a shadow colour and set the opacity.
    3. 

  3. Toggle between outer (box-shadow) and inset shadow.
    4. 

  4. Copy the generated CSS to your stylesheet.
    5. 
    

    
Frequently Asked Questions

    

    

      Can I add multiple box shadows?
      
Yes — click 'Add Shadow' to layer multiple shadows on the same element, just like CSS allows.

    

    

      What does 'inset' do?
      
Inset moves the shadow inside the element instead of outside, creating a pressed-in or inner glow effect.

    

    

      Does the generated CSS work in all browsers?
      
Yes — box-shadow is fully supported in all modern browsers without vendor prefixes.

    

    

      Can I preview on different backgrounds?
      
Yes — the background colour of the preview area can be adjusted to see how your shadow looks on different surfaces.