Skip to content
Toolbench

CSS box-shadow generator & tester

Interactive CSS box-shadow tool. Test offsets, blur, spread and inset shadows with live visual feedback and clean CSS code.

In your browser

CSS


    





            
            
                    


        
                    

                
Also with the box shadow generator

                

                                            Box shadow generator: all options
                                                                Smooth box shadow generator
                                            CSS inset shadow generator
                                    

            

        
        
                

            

                

                    
About this tool

                    
Experiment with the CSS box-shadow property. Move the sliders to test how blur, spread, and offsets interact, and copy clean CSS with zero boilerplate.

                                            
How to use it

                        
    
                                                            
  1. 
                                    1
                                    Adjust the Horizontal and Vertical offset sliders to set the light source direction.
                                
    2. 
                                                            
  2. 
                                    2
                                    Tune the Blur and Spread sliders to achieve soft ambient depth or sharp outlines.
                                
    3. 
                                                            
  3. 
                                    3
                                    Pick shadow and box background colors, and toggle Inset for an inner shadow effect.
                                
    4. 
                                                            
  4. 
                                    4
                                    Click Copy to copy the ready-to-use box-shadow CSS rule.
                                
    5. 
                                                    

                                                        

                                    

                        
Questions

                        

                                                            

                                    
                                        What do the values in a CSS box-shadow property mean?
                                        
                                    
                                    
The CSS box-shadow property syntax is: box-shadow: [inset] [horizontal-offset] [vertical-offset] [blur-radius] [spread-radius] [color];. Inset is optional and places the shadow inside the frame.

                                

                                                            

                                    
                                        How do I make CSS box shadows look natural and realistic?
                                        
                                    
                                    
Real-world shadows are soft and subtle. Use small vertical offsets (2px–8px), large blur radii (10px–30px), and low opacity black or tinted colors (rgba(0, 0, 0, 0.05) to rgba(0, 0, 0, 0.15)) rather than harsh solid dark shadows.

                                

                                                            

                                    
                                        Can I combine multiple box shadows on one element?
                                        
                                    
                                    
Yes. In CSS, you can layer multiple shadows separated by commas (e.g. box-shadow: 0 1px 3px rgba(0,0,0,0.1), 0 10px 20px rgba(0,0,0,0.05);) to create hyper-realistic ambient elevation.

                                

                                                            

                                    
                                        Is my data uploaded?
                                        
                                    
                                    
No. This tool runs in your browser, so your text and files never reach our server.

                                

                                                            

                                    
                                        Is this tool free?
                                        
                                    
                                    
Yes. It’s free to use with no sign-up and no limits for normal use.

                                

                                                    

                    

                            

        


        
                    

                

                    

                        

                            
                            
More in Colour & design

                        

                        
                            See all 8 colour & design tools