CSS box-shadow Property
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:
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. |
It is used to set the box-shadow property to its default value. | |
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.
<!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 w3wiki!</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.
<!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 w3wiki!</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.
<!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 w3wiki!</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.
<!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 w3wiki!</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.
<!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 w3wiki!</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
Contact Us