This is a very straightforward CSS3 property with wide browser support… except for IE. It works well when used subtly for header text (ie: not how I’ve done it!)
Text-Shadow Syntax
The syntax is very simple:
.textshadow {
text-shadow: 1px 1px 2px #404040;
}
In order, the parameter values are:
- horizontal offset (positive values offset to the right)
- vertical offset (positive values offset downwards)
- blur amount (zero = no blur)
- shadow colour
You can use an rgba() format colour value, to add a transparency to the shadow, like so:
.textshadow {
text-shadow: 1px 1px 2px rgba(35, 35, 35, 0.6);
}
You can also add multiple shadows to the same text, by simply listing shadow definitions one after another, separated by commas, like this (additional shadows will be rendered underneath earlier ones):
.textshadow {
text-shadow: 1px 1px 2px #404040, 4px 4px 8px #808080;
}
Text-Shadow in Internet Explorer
Of course, IE doesn’t play ball. The Text-Shadow property is not supported, so you need to add the following:
.textshadow {
text-shadow: 1px 1px 2px #404040;
-ms-filter: "progid:DXImageTransform, Microsoft.Shadow(Strength=2, Direction=135, Color='#404040')";
/* IE 5.5 - 7 */
filter: progid:DXImageTransform, Microsoft.Shadow(Strength=2, Direction=135, Color='#404040');
}
You will also find that IE sometimes does some very strange things, depending on your foreground, background and shadow colours. Sometimes this will totally destroy the text anti-aliasing, resulting in completely corrupted/unreadable text. You’ll just have to experiment.