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:
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.