How to CSS3 Text Shadow

One of the most cool features of the CSS3 is the Text Shadow property.

You can add shadow to your text instead of using the images like we all did in the past.

How the Text Shadow works?

The meaning of the parameters it’s something like:

text-shadow: X, Y, Blur, Color;

Wich broswers allow Text Shadow?

You can use this nice style in:

And NO, not in Internet Explorer ( 6, 7 & 8 ) 😉

Text Shadow Examples

CSS3 Text Shadow
Without CSS3 Text Shadow

Here’s another cool one:

CSS3 Text Shadow


2 Responses to “How to CSS3 Text Shadow”

  1. Alan May 8, 2010 at 4:04 am #

    Text Shadow effect used in the right way is awesome and really makes your design to pop out. Lets wait for IE, surely it will support the vast majority of CSS3 specifications and text shadow.

    BTW I like your blog, useful posts and easy to read, keep the good work, you’ve got a reader here.

    • quicoto May 8, 2010 at 10:54 am #

      Yep even if you can do the same with an image.

      Works better for SEO and it’s faster to develop.

      I’m already using CSS3 styles here in Developer’s Blog and I don’t give a damn about IE users. They will not see the effects 😉

      I glad you liked it.


Leave a Reply

Add <code> Some Code </code> by using this tags.