Skip to content
Related Articles

Related Articles

CSS box-shadow Property

View Discussion
Improve Article
Save Article
  • Last Updated : 02 Nov, 2021

The box-shadow property in CSS is used to give a shadow-like effect to the frames of an element. The multiple effects can be applied to the element’s frame which is separated by the comma. The box-shadow can be described using X and Y offsets relative to the element, blur and spread radius, and color.

Syntax:

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

Default Value : Its default value is none. 

Property Value:  All the properties are described well with the example below.

  • 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 the shadow above the 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: This example illustrates the use of the box-shadow property where properties such as h-offset, v-offset & blur are applied along with their values.

HTML




<!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: This example illustrates the use of the box-shadow property where the spread property is applied to set the size of the shadow.

HTML




<!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 an optional attribute and is used to set the color of the shadow.

Syntax:

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

Example: This example illustrates the use of the box-shadow property where different color shade is applied.

HTML




<!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 using the inset, we can create the shadow inside the box.

Syntax:

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

Example: This example illustrates the use of the box-shadow property where inset property is applied to make the shadow inside the box.

HTML




<!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 the box-shadow property to its default value.

Syntax:

box-shadow: initial;

Example: This example illustrates the use of the box-shadow property where the initial property is applied to set its values to the default value.

HTML




<!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 contain any shadow property.

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

  • Google Chrome 10.0 4.0 -webkit-
  • Internet Explorer 9.0 & later (use border-collapse)
  • Microsoft Edge 12.0
  • Firefox 4.0 3.5 -moz-
  • Safari 5.1 3.1 -webkit-
  • Opera 10.5

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!