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. The default value is none.Â
Syntax
box-shadow: h-offset v-offset blur spread color |none|inset|initial|inherit;
Property Value
 All the properties are described below:
none
|
It is the default value and it does not contain any shadow property.
|
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.
|
color
|
It is an optional attribute and is used to set the color of the shadow.
|
spread
|
It is used to set the size of the shadow. The size of the spread depends on the value of the spread.
|
inset
|
By default, the shadow generates outside the box. But using the inset, we can create the shadow inside the box.
|
initial
|
It is used to set the box-shadow property to its default value.
|
inherit
|
This property is inherited from its parent.
|
none
|
It is the default value and it does not contain any shadow property.
|
Example 1: 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:
Example 2: 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:
Example 3: 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:
Example 4: 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:
Example 5: 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:
Supported Browsers
The browser supported by the box-shadow property are listed below:
- Google Chrome 10.0
- Microsoft Edge 12.0
- Firefox 4.0
- Safari 5.1
- Opera 10.5
Last Updated :
14 Jan, 2024
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...