Skip to content

Box Shadow Generator

Create CSS box-shadow effects visually. Multiple layers, color picker, blur and spread controls, ready-made presets. Copy the code with one click.

No sign-up 100% free Private
Background: Shape:
Layer 1
5
5
15
0
35%
CSS 

    


    
    

        
Presets


        
        

            
            
            
            
            
            
            
            
        


        
        
Material Design Elevation

        


        
        
Neumorphism

        

    




    



        

    


        

            


    

        Was this tool helpful?
    

    

        
        
    

    



        




    

        

            

                

                    
CSS Box Shadow Generator
The CSS Box Shadow Generator is a free online visual tool that lets you design and customize CSS box-shadow effects in real time. Adjust horizontal offset, vertical offset, blur radius, spread radius, shadow color, and opacity using intuitive sliders, and see the result instantly rendered on a preview element. When satisfied with your design, copy the generated CSS code with one click and paste it directly into your stylesheet.The generator supports multiple shadows — you can stack several shadow layers on the same element to create complex depth effects, glowing edges, or neumorphic designs. Each shadow layer is independently configurable with its own offset, blur, spread, color, and inset toggle. The tool automatically generates cross-browser compatible CSS, including vendor prefixes for older browsers where necessary. The preview updates in real time as you adjust any parameter.Web designers and front-end developers use this tool to rapidly prototype shadow effects for cards and containers (material design elevation), buttons (pressed and hover states), modals and dialogs (floating effect), navigation bars (subtle depth separation), and neumorphic UI elements (soft inner and outer shadows). The visual approach eliminates the tedious trial-and-error of manually writing CSS shadow values and makes it easy to achieve the exact look you envision.CSS Box Shadow Generator is part of the facilita.tools suite of free web development utilities. Available in Portuguese, English, and Spanish, optimized for desktop and mobile browsers.
                

                    

                        
                    

            

        

    

    

        

            
Frequently Asked Questions

            
    

            

                
                    What is CSS box-shadow?
                    
                
                

                    
CSS box-shadow adds shadow effects around an element's frame. The syntax is: box-shadow: offset-x offset-y blur spread color. You can add the 'inset' keyword for inner shadows and stack multiple shadows separated by commas for complex effects.

                

            

            

                
                    How do I create a subtle card shadow?
                    
                
                

                    
A common subtle shadow is: box-shadow: 0 2px 8px rgba(0,0,0,0.1). This creates a soft shadow below the element with 8px blur and 10% opacity. For more depth, add a second layer: 0 4px 24px rgba(0,0,0,0.06).

                

            

            

                
                    What is the difference between box-shadow blur and spread?
                    
                
                

                    
Blur controls how soft/diffused the shadow appears (higher = softer). Spread controls the size of the shadow (positive = larger, negative = smaller than the element). A shadow with 0 blur and positive spread creates a solid border-like effect.