In this post, we will learn how to add shadow effect to elements using CSS. We add shadow effects to some elements to get a better user experience and good looking web design. How we can add shadow effect to element, we will learn in this post.


How To Add Shadow Effect To Elements Using CSS ?


Add Shadow Effect To Elements

To add shadow effect to element we use  box-shadow  CSS property. This property can add shadow to element on both inside and outside. 


 box-shadow  CSS Syntax:

For Outside shadow:

 box-shadow: h-shadow v-shadow blur spread color; 

For Inside shadow:

 box-shadow: h-shadow v-shadow blur spread color inset; 

For remove shadow:

 box-shadow: none; 


Some important terms to know before use the  box-shadow  property:

 h-shadow    For horizontal shadow

 v-shadow    For vertical shadow

 blur    To blur the shadow

 spread    To spread the shadow

 inset    For inner shadow


Example of  box-shadow  CSS property:


<!DOCTYPE html>
<html>
<head>
<title>How To Add Shadow Effect To Elements Using CSS ?</title>
<style>
.box{
width: 200px;
height: 200px;
background: #f1f1f1;
}
.inner-shadow{
box-shadow: 2px 4px 5px 5px #999 inset;
/*For working properly in all browser we also use this*/
-webkit-box-shadow: 2px 4px 5px 5px #999 inset;
-moz-box-shadow: 2px 4px 5px 5px #999 inset;
}
.outer-shadow{
box-shadow: 2px 4px 5px 5px #999;
/*For working properly in all browser we also use this*/
-webkit-box-shadow: 2px 4px 5px 5px #999;
-moz-box-shadow: 2px 4px 5px 5px #999; }
</style>
</head>
<body>
<h2>Inner Box Shadow</h2>
<div class="box inner-shadow"></div>
<br>
<h2>Outer Box Shadow</h2>
<div class="box outer-shadow">
</div>
</body>
</html> code-box


Summary

In this post we learned how to add shadow effect to elements using CSS. You try to make it yourself. I hope you make. If you face any problem, then comment and tell us. Keep visiting the blog to read more similar posts.

Post a Comment

Previous Post Next Post