How to Create Shadow effects in CSS3

Today we learn another css3 property that is box-shadow property. Before css3 we do this task in softwares like photo-shop but now its too easy to write simple small code that give shadow effects to images and texts. So let’s start how this works.

box-shadow Property in CSS3

This property is used to give shadow effects to any box like image or div. This property takes four values.

horizontal shadow
vertical shadow
blur distance and size of shadow
color of the shadow

box-shadow:10px 10px 5px grey; // This is simple code of box-shadow

Now we do some practical work and create a class in css with name “box” and give box-shadow property to it.

<html>
<head>
<style>
.box{
width:200px;
height:200px;
background-color:indigo;
box-shadow:10px 10px 15px grey;
-webkit-box-shadow:10px 10px 15px grey;
-moz-box-shadow:10px 10px 15px grey;
}

</style>

</head>
<body>
<div></div>
</body>

</html>

Output of above code :

Give shadow to images in css3

In the same way you may give shadow to any image. Simply use box-shadow property as shown in below example.

<html>
<head>
<style>
.image{
box-shadow:10px 10px 15px #888888;
-webkit-box-shadow:10px 10px 15px #888888;
-moz-box-shadow:10px 10px 15px #888888;
}

</style>

</head>
<body>
<div><img src=”https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8lPurS0vFSNGNSuuj6lXIdYQ8lbHMmr6sCC-1QwQW3buZP26EIonda577tsqH19N-umy0vH2vzfWhDCnsknhEY5pIKNHVEvtVUG4LQYEcKswWKX76NIwn0Can5tM3xfKtt80MDskbyl5-/s1600/rose-flower1.jpg” class=”image”/></div>
</body>

</html>

Output of above code :

Give shadow to text in CSS3

text-shadow is another property of css which is used to decorate your text on web pages. It is also very simple and easy to implement. follow the code below.

<html>
<head>
<style>
.text{

font-size:20px;

color:red;

text-shadow:5px 5px 6px yellow;
-webkit-text-shadow:5px 5px 6px yellow;
-moz-text-shadow:5px 5px 6px yellow;

}

</style>

</head>
<body>
<p class=”text”>This is example text showing shadow effect. It also takes 4 properties as box-shadow takes. It is very useful to design paragraphs with styling fonts and shadow effects on the websites.</p>
</body>

Output of above code is :

This is example text showing shadow effect. It also takes 4 properties as box-shadow takes. It is very useful to design paragraphs with styling fonts and shadow effects on the websites.

Your Lesson :

I hope you understand all codes describe above, if you have any confusion then let me know below. Also I have assignment for you. Copy all codes in your notepad and save it with .html extension and run on your browsers. we use -webkit- for chrome and safari browsers and -moz- for Mozilla because these browsers sometimes not supported this property but latest browsers not need to add these keywords. Use this effect on your website or blog. You can easily add it on any platform like blogger or wordpress. I will see you in next lesson. bye.