5 CSS Box-Shadow Effect With Examples
CSS Box Shadow is a CSS property that allows you to create a shadow behind any element on a web page.
To use Box Shadow, you first need to define the location of the shadow. You can do this by specifying the position (top, left, bottom, right) and the size (width and height) of the shadow.
After you define the shadow location, you can then specify the color of the shadow. box-shadow can have a single color or a blended color.
To create a blended shadow, you can use the blend mode property. There are three available blend modes: normal, darken, and lighten.
You can also use the opacity property to control the transparency of the shadow.
HTML Code:
<div class="pvcard pvcard-1"></div>CSS Code:
.pvcard {
background: #fff;
border-radius: 2px;
height: 300px;
margin: 10px;
width: 300px;
}
.pvcard-1 {
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}Example #2
HTML Code:
<div class="pvcard pvcard-2"></div>CSS Code:
.pvcard {
background: #fff;
border-radius: 2px;
height: 300px;
margin: 10px;
width: 300px;
}
.pvcard-2 {
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}Example #3
HTML Code:
<div class="pvcard pvcard-3"></div>CSS Code:
.pvcard {
background: #fff;
border-radius: 2px;
height: 300px;
margin: 10px;
width: 300px;
}
.pvcard-3 {
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}Example #4
HTML Code:
<div class="pvcard pvcard-4"></div>CSS Code:
.pvcard {
background: #fff;
border-radius: 2px;
height: 300px;
margin: 10px;
width: 300px;
}
.pvcard-4 {
box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
}Example #5
HTML Code:
<div class="pvcard pvcard-5"></div>CSS Code:
.pvcard {
background: #fff;
border-radius: 2px;
height: 300px;
margin: 10px;
width: 300px;
}
.pvcard-5 {
box-shadow: 10px 10px 10px 10px rgba(0,0,0,0.05), 0 10px 15px rgba(0,0,0,0.42);
}
Finally, you can add a highlight to the shadow by using the inner shadow property. This allows you to create a subtle shadow around the edge of the shadow. Box Shadow is a powerful property and can be used to create a variety of effects.
Vishal Jaiswal
Hi, this is an Indian Blogger, writing and publishing articles on various topics.