CSS box shadow property 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.Â
Try It:
Basic Box Shadow
Inset Box Shadow
Multiple Shadows
Colored Shadows
Spread Shadow
Syntax:
box-shadow: h-offset v-offset blur spread color | none | inset | initial | inherit;
Property Values:
 All the properties are described below:
Values
| Descriptions
|
---|
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.
|
CSS Box Shadow Examples
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 :
28 Mar, 2024
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...