Remember the old days when the only way to create a shadow on text was to make it an image? That’s good for search engines..right? Oh sure, just use some image replacement and then the search engines can read it. Not so easy for text edits in the future. Or for changing the color of the text or the background behind the text.

Fastforward to CSS3. Now we can define a shadow behind live text on a website. Wiggity whaaat? That’s right, simply with some good old CSS. Of course you’ll need to use a real browser, as of any other cool CSS technique, but I won’t even begin to go into that topic. So why is this so great?

• Search engines can read the text
• Easily change the color of the text
• Easily change the color, size, or blur of the shadow
• Easily change the background color or image behind the text
• Your friends will be like totally impressed

An example of this is the title to every article on this lil website of mine. Do you see the shadow behind the title “Using Text-Shadow with CSS3“? If you don’t for the love of god.. DOWNLOAD FIREFOX! Check out the demo for some more examples of text-shadow created with CSS3, and then continue reading to learn how to write the CSS.

View Demo

The CSS to create the text-shadow is pretty simple. It’s written like this:

{text-shadow: 2px 2px 4px #000}

The first number is how far right of the text the shadow should go, the second is how far below the text, and the final number is the amount of blur to apply to the shadow. Then of course the color of the shadow is declared.

You can see below the examples from the demo page, and below them are the CSS styles that create each effect.

In this next example you can see how you can create a beveled look by using a shadow that goes zero pixels to either side, but goes 1 pixel straight up above the text.

So there it is, creating text-shadows with CSS3. You might also want to check out a recent article where I show how to use border-radius with CSS3; (which is how the rounded corners on these divs above were created).