CSS | box-shadow Property

Last Updated : 08 Aug, 2019

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>                    