← すべてのツール / CSS Box Shadow Generator

CSS Box Shadow Generator

Create beautiful CSS box shadows visually with preview and live code.


            

        

        














    
        
Create Perfect CSS Box Shadows

        
Adding a box-shadow to elements can completely transform a flat design into an engaging, modern interface with depth and elevation. However, writing the raw CSS syntax and guessing the correct blur, spread, and opacity values takes a lot of trial and error.

        
Our CSS Box Shadow Generator allows you to visually tweak the horizontal/vertical shifts, blur radius, spread, and opacity of a shadow in real-time. Whether you are aiming for a subtle, elegant drop shadow or a bold, dramatic inner shadow, you can achieve it instantly and copy the generated CSS code right into your project.

        
    
よくある質問

    

        
        

            

                
            

            

                
The standard syntax is: box-shadow: [horizontal offset] [vertical offset] [blur radius] [spread radius] [color]. It can also include the 'inset' keyword to make it an inner shadow.

            

        

        

            

                
            

            

                
The spread radius expands or contracts the size of the shadow. A positive value increases the shadow's size making it wider than the element, while a negative value shrinks it.

            

        

        

            

                
            

            

                
To create a natural, modern shadow, increase the blur radius significantly (e.g., 20px - 30px) and lower the opacity of the shadow color (e.g., 0.05 - 0.15).