CSS Drop Shadow for Text

Drop shadow is a pretty cool feature you can add to any text with CSS. It is supported by Opera, Firefox, Chrome and Safari but unfortunately not Internet Explorer (can’t say I got surprised) Since IE does not support it yet and a rough 50% of internet surfers are using the browser you should be careful and not use alot of drop shadow effects for your website. Simply adding some shadow effects as a finishing touch for headings and not much more is a good way to go with it. At least do not make any functionality dependant on the effect.

Here’s how to add the Drop Shadow Effect to Text with CSS:

p.text-shadow {text-shadow:red 2px 2px 0px}

This is how the text inside a paragraph with the class text-shadow looks like…

Explanation:

The property has 4 options. First you must specify what color you want the shadow to be, then how far right it should be aligned, then how far down it should be aligned and finally how much of a blur effect you want it to display.