Starlight Tools

Web CSS Tool

CSS Box Shadow Generator & Preview

Create polished single, layered, and inset shadows visually. Adjust every value, compare the live result, and copy clean box-shadow CSS.

Design CSS shadows without guessing

A good interface shadow often combines a broad, faint ambient layer with a smaller directional layer. This generator lets you edit each layer separately and combines them into one valid, comma-separated declaration. Use positive or negative offsets, soften edges with blur, expand or contract the footprint with spread, and switch any layer to an inner shadow with inset.

The preview and CSS update locally as you work. No shadow settings or copied code are sent anywhere.

Live preview

Preview cardLayered shadow in real time

Runs locallyNo uploadsCopy-ready CSS

Generated CSS


          

            
            
            
            
          

          

        

      


      

        
Shadow controls

        
Select a layer to edit it. Layers are painted front to back in the listed order.

        

        

          
          
          
        


        

        

          

            
            

          

          

            
            

          

          

            
            

          

          

            
            

          

          

            
            

          

          

            
            

          

        

        
        

        
Quick presets

        

      

    


    

      
How CSS box-shadow values work

      
box-shadow: x-offset y-offset blur-radius spread-radius color inset;

      

        
Offset
The first value moves the shadow horizontally and the second vertically. Positive values move right or down; negative values move left or up.

        
Blur and spread
Blur softens the edge and must be zero or positive. Spread grows a positive shadow or contracts a negative one before blur is applied.

        
Color and inset
Alpha controls visual strength. Add inset to paint inside the border box; omit it for the usual outer shadow.

      

      
Syntax reference: W3C CSS Backgrounds and Borders Module. The generator uses pixels, rounds values consistently, and permits up to eight layers to keep output manageable.

    


    

      
Practical shadow tips

      

        
Natural elevation
Combine a wide, low-opacity ambient layer with a smaller, slightly darker directional layer. Soft shadows usually look more convincing than one very dark edge.

        
Performance
Large blurred shadows and many animated layers can be expensive to paint. Keep motion restrained and test scrolling on the devices your site supports.

        
Clipping
Shadows do not change layout size. Leave visual breathing room and check ancestor overflow or clipping rules when a shadow disappears.

      

    


    

      
CSS box shadow FAQ

      
What do the four length values mean?
They are horizontal offset, vertical offset, blur radius, and spread radius. The blur radius cannot be negative; spread and offsets can be.

      
How do I create multiple box shadows?
Separate each shadow with a comma. Add or duplicate layers here and the generator will assemble the comma-separated value automatically.

      
What does inset do?
inset paints the shadow inside the element. It is useful for pressed buttons, recessed panels, form fields, and subtle inner highlights.

      
Does a box shadow affect layout?
No. It is painted without changing the element’s calculated width or height, though nearby content can visually overlap it.

      
Why is my shadow cut off?
Check ancestors for overflow: hidden, overflow: clip, clipping paths, or insufficient visible space around the element.

      
Are my settings uploaded or stored?
No. The tool runs entirely in your browser and does not upload or store your shadow settings.

    


      

        
Explore more tools