WP-Mix

Here are some of my favorite/most-used CSS text-shadow snippets.

CSS3 text-shadow property is basically fully supported, with the exception of Opera Mini, which fortunately isn’t widely used. So if you’re looking for a simple way to enhance the appearance of text, here are some favorite CSS recipes for quick copy/paste usage.

text-shadow syntax

selector { text-shadow: h-shadow v-shadow blur color; }

Note that the h/v shadows accept negative values.

Drop stroke effect

white
text-shadow: 1px 1px 1px #fff;
text-shadow: 1px 1px 1px rgba(255,255,255,0.5);

black
text-shadow: 1px 1px 1px #000;
text-shadow: 1px 1px 1px rgba(0,0,0,0.5);

Drop shadow effect

white
text-shadow: 0 0 2px #fff;
text-shadow: 0 0 2px rgba(255,255,255,0.5);

black
text-shadow: 0 0 2px #000;
text-shadow: 0 0 2px rgba(0,0,0,0.5);

Vertical highlight

white
text-shadow: 0 1px 0 #fff;
text-shadow: 0 1px 0 rgba(255,255,255,0.5);

black
text-shadow: 0 1px 0 #000;
text-shadow: 0 1px 0 rgba(0,0,0,0.5);

Horizontal highlight

white
text-shadow: 1px 0 0 #fff;
text-shadow: 1px 0 0 rgba(255,255,255,0.5);

black
text-shadow: 1px 0 0 #000;
text-shadow: 1px 0 0 rgba(0,0,0,0.5);

More text-shadow examples

Check out the CSS text-shadow examples at Perishable Press for more! :)