In this post, we will learn how to add shadow effect to text using CSS. For stylish and decorated text we add shadow effect to text. How we can add shadow effect to text, we will learn in this post. 


How To Add Shadow Effect To Text Using CSS ?


Add Shadow Effect To Text 

To add shadow effect to text we use  text-shadow  CSS property. This property can add shadow to text. We can add multiple shadows to a text at a time.


 text-shadow  CSS Syntax:

Single Shadow effect:

 text-shadow: h-shadow v-shadow blur color; 


Multiple Shadow effect:

 text-shadow: h-shadow v-shadow blur color, h-shadow v-shadow blur color


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

 h-shadow    For horizontal shadow

 v-shadow    For vertical shadow

 blur    To blur the shadow


Example of  text-shadow  CSS property:


<!DOCTYPE html>
<html>
<head>
<title>How To Add Shadow Effect To Text Using CSS ?</title>
<style>

p{
font-size: 30px;
}

p.text-shadow-1{
text-shadow: 2px 2px 5px red;
}

p.text-shadow-2{
text-shadow: 2px 2px 3px blue, 3px 3px 2px yellow;
}

</style>
</head>
<body>

<p class="text-shadow-1">This is example text 1.</p>

<p class="text-shadow-2">This is example text 2.</p>

</body>
</html> code-box



Summary

In this post we learned how to add shadow effect to text 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