How to Add a Shadow to Text Using CSS

Sometimes a well done shadow makes a huge difference in user experience. Shadows are cool and give a very nice look to the text on your website. They are extremely easy to implement via CSS3 as well, but don’t get your hopes up – IE does not support this CSS attribute just yet. You can do all kinds of things with it, depending on sizes, offsets and colors, but all in all, all you need is the text-shadow rule:

body
{
    text-shadow: 2px 5px 8px #0000ff;
}

The above example sets up a rule on the whole page (unless overridden) to have any text shadowed 2 pixels to the right, 5 pixels downwards and with 8 pixels shadow size (this is how much of a blur you are going to get). The last parameter, of course, is the color you want to use for the shadow.
For the sake of a good example of a div:

<div style="text-shadow: 1px 1px 2px #0000ff;">
Hello World!
</div>

And this is the result:

Hello World!

And again, this may not work in Internet Explorer.

This entry was posted in CSS and tagged , , , , , , , , . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *