CSS3 – Text Shadow

January 19, 2013

Text Shadow is another fun little CSS3 feature that makes things so much easier – for most of us, anyway. There’s bad news for IE users: Text shadow feature is NOT supported by any version of Internet Explorer at this time. All other major browsers not only support it, they support it without requiring any pesky pre-fixes.

This is Text Without a Shadow

With a small bit of CSS …

{
text-shadow: 4px 6px 5px #0bd;
}

… we can create:

This Text WITH a Shadow

We have defined, in this order, the horizontal shadow (4px), the vertical shadow(6px), the blur distance (5px), and the color. Defining the color is not required, the default is black, so we only need this part if we want a shadow in a different color.

Playing around with this by adding negatives, we can cast all kinds of shadows:

text-shadow: -8px -6px 15px #f0e;

If you have any questions about this tutorial or run into trouble trying it yourself, post your question/problem in the Killersites Forum for help.