Dave Woods - Freelance Web Design Warwickshire

CSS Text shadow

Applying css text shadow is very simple to apply using CSS3. Within this article are some sample code snippets to easily apply a text shadow to text in a webpage.

You can apply CSS text shadow to any text on a webpage using the following:

p { text-shadow: 1px 1px 1px #000; }

This will output the following style:

Here’s some text with a shadow

The first value is the horizontal distance and the second the vertical distance of the shadow. The third value is the radius of the blur and the final value is the colour of the shadow:

1. value = The X-coordinate
2. value = The Y-coordinate
3. value = The blur radius
4. value = The color of the shadow

Multiple text-shadows

You can also specify multiple text shadows like so:

p { text-shadow: 1px 1px 1px #f00, 3px 3px 5px #00f; }

This will output the following style:

Here’s some text with multiple shadows

Text-shadows with transparency

You can also specify the colour using RGBA values to allow transparency within the shadow:

p { text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.8); }

This snippet will generate the following style with 80% transparency.

Here’s some text with a semi-transparent text-shadow

Browser support

All modern browsers support text-shadow, however IE9 and below sadly don’t. Personally I feel it’s fine to use this as progressive enhancement but if you do absolutely need text shadows in earlier versions of IE then you’ll probably be best using a conditional style which relies on a filter. You can find details of this here: text shadows for IE9 and below. You could also use javascript if you’d prefer a jQuery solution. jQuery text-shadow.