Neat css shadows

One of the coolest css3 properties is the text shadow. The simple beauty of a nicely placed shadow can add a lot to an otherwise basic text.

Whoa, it has a shadow!
And now it's white, wut. D:

The second example up there is actually the one I absolutely love. The effect is really nice when you don't overdo it. It looks good in a footer for example.

So, how do you do that? Like so:

text-shadow: 1px 1px 1px #fff;

The first value is the offset fo the shadow horizontally, the second is vertical offset and the third is the fluffyness -- or blur, if we want to keep it professional. You can play with this endlessly, for example:

It's pretty sunny out here...!

In box-shadow (used on elements rather than texts) there is a fourth value: spread. This value basically makes the shadow larger or smaller, more outward or inward. This is what spread does:

Large shadow, light source close.

Small shadow, lit from further away.

box-shadow: 0 0 10px 5px #888; /*close*/
box-shadow: 0 0 10px 0 #888; /*far*/

And for some extra fun:

Wait, where's the light source?

Which is several different shadow-properties added to one element like so:

text-shadow: 20px 15px 3px #888,
            -20px -15px 5px #888,
             40px 0 3px #888,
             5px -30px 7px #888;