So apparently this has been around for years and years, since 1996 or something. Well i just discovered it (again). I remember something about this property some time ago, and then i forgot about it. Well no more! Apparently this is not enabled in “all” browsers yet, but hey. if you cant see it, it just doesn’t look as cool. So it degrades pretty well.

And the code is:

1
2

/* CSS to style all H1 tags with a white shadow */
h1 { text-shadow: 1px 1px 1px #FFF; }

^ this will insert a 1px white shadow with 1px of blur.

the breakdown for this is:
text-shadow: 1 2 3 4;
1 = The X-co-ordinate
2 = The Y-co-ordinate
3 = The amount of blur radius
4 = The shadow color

In some browsers you can even stack the shadows for some cool lookin fire effects and ice, play around with it to get some cool stuff going on!

For the title of this blog i used:

1

text-shadow:0 0 4px #ccc, 0 -2px 4px #e49649, 0 -4px 4px #b1552f, 0 -6px 6px #933d23;

makes it look nice and flamey

Looks better with a black background:

makes it look nice and flamey

Or you can add some ICE.

code:

1

<p style="background: #000; color: #fff; padding: 10px; text-shadow: 0 0 4px #ccc, 0 -2px 4px #c3ccf4, 0 -4px 4px #8495e0, 0 -6px 6px #286fb8; font-size: 14px;">Mmmm Icey Flame Action</p>

demo:

Mmmm Icey Flame Action

I think the stacking of shadows does not work correctly in browsers like safari, but they may have fixed this issue by now (hopefully)

Just the standard shadow makes headlines look really neat.

1

<p style="text-shadow: 1px 1px 1px #EEE;">Cool Text Shadow</p>

Cool Text Shadow

Anyway thats my take on text shadows, pretty easy when used with CSS!