CSS3 Drop Shadow Effect: Adding Drop Shadow to the Text on Webpage

‘Drop shadow’ is one of the beautiful effects you can apply using CSS3. It can be used to add tiny shadow to highlight a piece of text on the webpage. Drop shadow effect on the text gives a slight elevated effect for the text on the page.

The text-shadow property lets you add shadows to text. Lets see this property in action.

Let us suppose the following code to be added with the shadow effect.

Code:

<h1>Baked Garlic</h1>
<p>Garlic may be known for being a little bit <em>stinky</em>, but
baked it is absolutely delicious and as long as you feed it to all
of your guests no-one will complain about the smell! Once baked
the garlic becomes creamy and sweet making an ideal spread to
accompany cheese.</p>

To get the ‘drop shadow’ effect, we need to add the text-shadow property to the tags used above. The CSS there by coded looks as follow:

h2 {
font-size: 250%;
color: #256579;
text-shadow: 3px 3px 3px #999;
}

Result:
The result for the above code would like this on the webpage:

Using text-shadow property

So far we have seen the text-shadow property in action. Let’s see how can it be customized on a webpage.

To customize it, we should have an idea of its syntax. Then only we could mold it according to our requirement.

The syntax of the text-shadow property is as follows:

text-shadow: 5px, 5px, 5px, #999;

The first value 5px is horizontal distance from the text where as the second 5px is the vertical distance from it. The third value, 5px is the blur radius or spread of the shadow and the fourth value #999 is the color in hexadecimal code.

So, you are now well aware of the text-shadow property and so can play with the values of your own.

Tip: Use text-shadow property while applying styles to form buttons or big headings. It would be difficult to read if this property is applied for paragraph text.

Need any help in using text-shadow property? leave me a comment, I’ll get back to you!