CSS Text Effects: Text Shadow

The CSS text shadow property has been around since the release of CSS2, but has not been supported by mainstream browsers until recently. The level of support is still limited, but with time we will start seeing it more and more.

Basically text shadow allows you to render text with a blur, glow or off-set shadow without using an image. Benefits of this include:

• The ability to allow text to be searchable by popular search engines like Google or Yahoo.
• Reduce load time by eliminating image files.

The possibilities are limitless with this property. I have seen it used to create engraved, neon, retro, anaglyphic and even fire effects on text. This is done by simply setting one shadow or multiple shadows to created a gradient effect.

They syntax is simple. You have the ability to adjust the x-offset, y-offset, blur and collar. These are set in this order. See example below:

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

When setting multiple shadows to create a glowing effect the code would look like this.

text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff;

Rumors abound that MS Explorer will begin supporting this property in upcoming releases, but nothing is verified. Currently the major browsers that support this property include:

• Safari
• Firefox
• Opera
• Google Chrome

So come on Microsoft, catch up. We could be saving the world by reducing the number of images used on sites therefore reducing bandwidth, power consumption, etc, etc...