CSS box-shadow Property - GeeksforGeeks

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.
<!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.
<!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.
<!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.
<!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.
<!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
bhaskargeeksforgeeks
ManasChhabra2
CSS-Properties
Picked
CSS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to create footer to stay at the bottom of a Web page?
How to update Node.js and NPM to next version ?
CSS to put icon inside an input element in a form
Roadmap to Become a Web Developer in 2022
Installation of Node.js on Linux
How to fetch data from an API in ReactJS ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Convert a string to an integer in JavaScript