Skip to content
Toolbench

Smooth box shadow generator

Design smooth, modern CSS box shadows for UI cards with live visual feedback. Tune blur, opacity and spread. Free.

In your browser

CSS


    





            
            
                    


        
                    

                
Also with the box shadow generator

                

                                            Box shadow generator: all options
                                                                CSS box-shadow generator & tester
                                            CSS inset shadow generator
                                    

            

        
        
                

            

                

                    
About this tool

                    
Create smooth, layered-style box shadows for modern UI cards, dialogs, and components. Adjust vertical elevation and blur to create a realistic floating effect, then copy the CSS.

                                            
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

                        

                                                            

                                    
                                        How do I create a soft modern shadow in CSS?
                                        
                                    
                                    
Use a subtle vertical offset (4px to 10px), a generous blur radius (15px to 30px), and an opacity between 6% and 12% with dark gray or tinted brand colors.

                                

                                                            

                                    
                                        Does this generator support inner (inset) shadows?
                                        
                                    
                                    
Yes. Check the Inset option to render the shadow on the inside of the element frame.

                                

                                                            

                                    
                                        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