CSS | box-shadow Property

The box-shadow property in CSS is used to give a shadow-like effect to the frames of an element.

Syntax:

box-shadow: h-offset v-offset blur spread color |none|inset|initial|
inherit;

Property Value:

h-offset: It is required to set the position of the shadow horizontally. The positive value is used to set the shadow on the right side of the box and a negative value is used to set the shadow on the left side of the box.
v-offset: It is required to set the position of shadow value vertically. The positive value is used to set the shadow below to the box and a negative value is used to set shadow above box.

blur: It is an optional attribute, the work of this attribute is to blur the shadow of the box.

Syntax:

box-shadow: h-offset v-offset blur;

Example:

<!DOCTYPE html> 
<html> 
    <head> 
        <title>CSS box-shadow Property</title> 
      
        <style> 
            .gfg1 { 
                border: 1px solid; 
                padding: 10px; 
                  
                /* box-shadow: h-offset v-offset blur */ 
                box-shadow: 5px 10px 10px; 
            } 
            .gfg2 { 
                border: 1px solid; 
                padding: 10px; 
                  
                /* box-shadow: h-offset v-offset blur */ 
                box-shadow: 5px 10px 28px; 
            } 
        </style> 
    </head> 
      
    <body> 
        <div class = "gfg1"> 
            <h1>Welcome to GeeksforGeeks!</h1> 
       </div><br><br> 
         
        <div class = "gfg2"> 
            A computer Science portal 
        </div> 
    </body> 
</html>                                 

Output:

spread: It is used to set the size of the shadow. The size of the spread depends on the value of the spread.

Syntax:

box-shadow: h-offset v-offset blur spread;

Example:

<!DOCTYPE html> 
<html> 
    <head> 
        <title>CSS box-shadow Property</title> 
      
        <style> 
            .gfg1 { 
                border: 1px solid; 
                padding: 10px; 
                  
                /* box-shadow: h-offset 
                       v-offset blur spread */ 
                box-shadow: 5px 10px 10px 10px; 
            } 
            .gfg2 { 
                border: 1px solid; 
                padding: 10px; 
                  
                /* box-shadow: h-offset 
                       v-offset blur spread */ 
                box-shadow: 5px 10px 28px 20px; 
            } 
        </style> 
    </head> 
      
    <body> 
        <div class = "gfg1"> 
            <h1>Welcome to GeeksforGeeks!</h1> 
       </div><br><br> 
         
        <div class = "gfg2"> 
            A computer Science portal 
        </div> 
    </body> 
</html>                     

Output:

color: It is optional attribute and used to set the color of shadow.

Syntax:

box-shadow: h-offset v-offset color;

Example:

<!DOCTYPE html> 
<html> 
    <head> 
        <title>CSS box-shadow Property</title> 
      
        <style> 
            .gfg1 { 
                border: 1px solid; 
                padding: 10px; 
                  
                /* box-shadow: h-offset v-offset blur  
                spread color */ 
                box-shadow: 5px 10px 10px 10px green; 
            } 
            .gfg2 { 
                border: 1px solid; 
                padding: 10px; 
                  
                /* box-shadow: h-offset v-offset blur  
                spread color */ 
                box-shadow: 5px 10px 28px 20px green; 
            } 
        </style> 
    </head> 
      
    <body> 
        <div class = "gfg1"> 
            <h1>Welcome to GeeksforGeeks!</h1> 
       </div><br><br> 
         
        <div class = "gfg2"> 
            A computer Science portal 
        </div> 
    </body> 
</html>                     

Output:

inset: By default the shadow generates outside the box but by the use of inset we can create the shadow inside the box.

Syntax:

box-shadow: h-offset v-offset color inset;

Example:

<!DOCTYPE html> 
<html> 
    <head> 
        <title>CSS box-shadow Property</title> 
      
        <style> 
            .gfg1 { 
                border: 1px solid; 
                padding: 10px; 
                  
                /* box-shadow: h-offset v-offset blur  
                spread color inset */ 
                box-shadow: 5px 10px 10px 10px green inset; 
            } 
            .gfg2 { 
                border: 1px solid; 
                padding: 10px; 
                  
                /* box-shadow: h-offset v-offset blur  
                spread color inset */ 
                box-shadow: 5px 10px 28px 20px green inset; 
            } 
        </style> 
    </head> 
      
    <body> 
        <div class = "gfg1"> 
            <h1>Welcome to GeeksforGeeks!</h1> 
       </div><br><br> 
         
        <div class = "gfg2"> 
            A computer Science portal 
        </div> 
    </body> 
</html>                     

Output:

initial: It is used to set box-shadow property to its default value.

Syntax:

box-shadow: initial;

Example:

<!DOCTYPE html> 
<html> 
    <head> 
        <title>CSS box-shadow Property</title> 
      
        <style> 
            .gfg1 { 
                border: 1px solid; 
                padding: 10px; 
                  
                /* box-shadow: initial */ 
                box-shadow: initial; 
            } 
            .gfg2 { 
                border: 1px solid; 
                padding: 10px; 
                  
                /* box-shadow: initial */ 
                box-shadow: initial; 
            } 
        </style> 
    </head> 
      
    <body> 
        <div class = "gfg1"> 
            <h1>Welcome to GeeksforGeeks!</h1> 
       </div><br><br> 
         
        <div class = "gfg2"> 
            A computer Science portal 
        </div> 
    </body> 
</html>                     

Output:

inherit: This property is inherited from its parent.
none: It is the default value and it does not contains any shadow property.

Supported Browsers: The browser supported by box-shadow property are listed below:

Google Chrome
Internet Explorer
Firefox
Safari
Opera

My Personal Notes

Recommended Posts: