Text Shadow - Tutorial and Examples Of How To Shadow Text

May 09, 2011 — Text shadow allows developers to give dimension to their text and broadening the use of typography in web design. The text-shadow property specifies one or more text shadow effects can be text content of an element.

text shadow

This text shadow tutorial will demonstrate some CSS that will show you how shadows can be applied to standard text in you HTML. The CSS property text-shadow is one of the easier and more versatile CSS3 properties and you can do more with it than just shadow text. By using text-shadow you can have the appearance of engraved text, glowing text, blurred text and even text that is on fire! So enough with the chat lets get to some examples of text-shadow.

text shadow example

Congratulations. You're not illiterate.

If you're viewing this on Internet Explorer I'm afraid you're not seeing the text shadow effect. It's a shame really because it's quite impressive. Might we suggest you use a different browser like Firefox or Chrome and while we're on the subject of browser compatibility we should mention the text-shadow property is compatible with Firefox 3.5+, Chrome 2+, Opera 9.5+ and Safari 1.3+

The Syntax

text-shadow: 7px 5px 3px #CCC;

what does it all mean?

The declaration (text-shadow:) The color of the text-shadow (#CCC) The X-coordinate of the text shadow relative to the text e.g. left and right. Positive for right and negative for left (7px). The Y-coordinate of the text shadow relative to the text e.g. up and down. Positive for down and negative for up (5px). The Blur of the text shadow. Where zero is no blur and over 100 is just fuzz.

more fun with text shadow

As we said earlier in the tutorial, the text-shadow property is one of the most versatile properties of CSS3 The following are some fun examples, albeit mostly useless, but maybe they will inspire you to do other creative things in web design with text-shadow other than just shadowing text.

This is Engraved Text

The Syntax
font-size: 48px; 
text-shadow: text-shadow: 0px -1px -1px #fff;

 I'm on fire!

The Syntax

font-size: 48px; 
text-shadow: 0 0 4px #fffdd1, 0 -5px 4px #fff79e, 2px -10px 6px #fff200, 
             -2px -15px 11px #ffbf00, 2px -18px 18px #ff0000;

Blurred Text

The Syntax

font-size: 48px; 
text-shadow: text-shadow: 0px 36px 6px #666;

more CSS Text Effects

Have a question about text shadows?

Leave us a comment and we'll see if we can answer your questions. We might be a web design company in Shenzhen, China, but we're always online and happy to help the developer community.

Add a Comment


Posted Subject Comment
June 05, 2011
CSS Text Shadow Very clear tutorial. I especially like the examples you show using text shadow. Very unique.