CSS Box Shadow Generator

Design layered shadows and soft UI effects.

CSS Code 

                    

                


                

                    
Quick Presets

                    

                        
                        
                        
                        
                    

                


            

        

    


    

        

            
Mastering CSS Box Shadows

            

                
The box-shadow property is one of the most versatile tools in modern web design. It allows you to add depth, dimension, and emphasis to elements without using image assets. 

                
                
Understanding the Values

                
    
                    
  • Offset-X: Horizontal distance. Positive values move shadow right, negative left.
    • 
                    
  • Offset-Y: Vertical distance. Positive values move shadow down, negative up.
    • 
                    
  • Blur Radius: How sharp or diffuse the shadow is. 0 is sharp, higher values are blurrier.
    • 
                    
  • Spread Radius: Expands or shrinks the shadow size relative to the element.
    • 
                    
  • Inset: Changes the shadow from an outer drop shadow to an inner shadow.
    • 
                


                
What is Neumorphism?

                
Neumorphism (Soft UI) is a design trend that combines light and dark shadows to create elements that appear to be extruded from the background. This tool allows you to easily generate the dual-shadow code required for this effect.

            

        

    


    

        

            
            CSS Copied!