CSS Text Shadow Property

The CSS Text Shadow property allows designers to add creative effects to the text on their website without having to render the block of text as a image. This is a huge advantage for many reasons, but most importantly for usability and SEO.

Although the Text Shadow property is not necessarily a new thing (first defined with CSS2 in 1998), It hasn’t been widely supported or acknowledged until recently and is often referred to as a CSS3 property.

The Syntax

p.shadow {
text-shadow: #989898 12px -14px 2px;
}

The resulting class will look like this on a paragraph

As you can see from above the text-shadow property requires four values:

1. The colour of the shadow (#989898)
2. The X-coordinate of the shadow (12px)
3. The Y-coordinate of the shadow (-14px)
4. The blur radius of the shadow (2px)

Browser Support

• Internet Explorer – Currently not supported in any versions
• Firefox – Supported since version 3.1
• Safari – Supported since version 1.1
• Google Chrome – Supported since version 2.0
• Opera – Supported since version 9.5

This entry was posted on Monday, April 26th, 2010 at 3:44 pm and is filed under CSS, Typography, Web Design. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.