Stay away from using black as your shadow- it looks unnatural, and can make your text more difficult to read.

In my own experience I have found that black (and white) work rather well when you specify the color in RGBA syntax and apply a low opacity:


h1 {
text-shadow: 0.055556em 0.055556em 0.083334em rgba(0, 0, 0, 0.3);
}

Specifying the color of the shadow in RGBA syntax allows the semi-transparent, all black shadow to blend into the background color it sits above. You can check out an example I put together here: http://dl.dropbox.com/u/126928/text-shadow-test.html

By sticking with RGBA black for the text shadows you can easily change the background color without having to change the text shadow color. It blends nicely into any background. I’m pretty sure I first saw this done on Wilson Miner’s website. It’s a pretty safe bet that the browsers that implement text-shadow also have RGBA support as well. There are even ways to fake it in IE using the proprietary filter syntax.

Thanks for the read!

h3 { text-shadow: rgba(0,0,0,.5) .1em .1em .1em; }

I find I have more control with rgba, especially when creating highlight and emboss effects for text.