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?

text-shadow: 2px 2px 2px #000;

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

background: #95a5a6; padding: 20px; color: #4B4B4B; text-shadow: 0 1px 1px white;

Here's another cool one:

CSS3 Text Shadow

background: black;
padding: 20px;
color: white;
text-shadow: 0 0 5px #fff, 0 0 10px #fff
, 0 0 15px #fff
, 0 0 20px #ff2d95
, 0 0 30px #ff2d95
, 0 0 40px #ff2d95
, 0 0 50px #ff2d95
, 0 0 75px #ff2d95;

About Ricard Torres

Senior Front-end Software Engineer from Barcelona, Haidong Gumdo Instructor (korean martial art of the sword), street photographer, travel lover, TV addict, Boston Red Sox fan, and privacy advocate.

@ricard_dev @ricard_dev

📝 Blog 🎙 Podcast

  • 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.

    • 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.