Skip to content
Toolbench

CSS inset shadow generator

Create inner CSS box shadows (inset) with live visual preview. Adjust depth, blur and opacity, and copy the CSS. Free.

In your browser

CSS


    





            
            
                    


        
                    

                
Also with the box shadow generator

                

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

            

        
        
                

            

                

                    
About this tool

                    
Generate inner inset shadows for sunken buttons, form inputs, and recessed card designs. Move the sliders to adjust inner depth and copy the CSS code.

                                            
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