CSS Drop Shadows

The CSS2 text-shadow property makes it easy to add a drop shadow to a web page’s text, but so far it’s only supported by the Safari browser for OS X. Today we’re going to create CSS drop shadows for other browsers, including Firefox.

The text-shadow property has been around for a few years, allowing you control the colour, offset and blur of drop shadows below elements on your page. Although not widely supported, some designers have decided to use CSS text-shadows anyway, even if it only enhances their design for a relatively small number of users.

CSS Text-Shadows for Safari

If you’re using Safari, you’ll see white text on a white background, made visible by use of a text-shadow below:

This is white text, on a white background. Yet in Safari, you can read this, because of the black text-shadow.

If you’re not using Safari, here’s a screenshot of what you’re missing out on:

CSS Drop Shadows for Everyone*

Firefox is a great browser, but it doesn’t support that effect – so I decided to create a similar effect using the CSS it does support. While not quite as nice a shadow as you’ll see with the text-shadow property, this approach will work on a wider range of browsers – including Safari.

This is white text, on a white background. Yet with Drop Shadows, you can read this, because of the black text-shadow.

The HTML

To add the drop shadow effect, we’re going to create a title attribute on our example paragraph and duplicate the text we’ll be shadowing. Since we’re duplicating text in this manner, this technique is probably better suited for use in titles, or short passages of text, rather than entire pages.

<p class="shadow" title="This is white text, on a white background. Yet with CSS Drop Shadows, you can read this, because of the black text-shadow."><span>This is white text, on a white background. Yet with CSS Drop Shadows, you can read this, because of the black text-shadow.</span></p>

We’ll also add <span> tags inside our paragraph to let us control the position of the normal text separately from the generated shadow.

The CSS

The CSS :before pseudo element will be used to generate the shadow from the title attribute of the paragraph, and absolute positioning used to position the normal paragraph text overtop the shadow text. You’ll note that CSS generated text is not normally selectable, which means copying and pasting text is not adversely affected by this technique.

.shadow  { position:relative; display:block; color:#fff; }
.shadow span { position:absolute; display:block; top:0px;  }
.shadow:before { display:block; padding:1px; content: attr(title); color:#666;  } 

When I was developing CSS Image Maps I realized that you could use position:absolute to control the placement of an element within another element that was set to useposition:relative. This lets use control the placement of the text and it’s shadow, while still being able to use the element within the regular flow of the document.

You can control the foreground colour, and overall font properties using .shadow. The properties for .shadow:before allow you to control the drop shadow offset, using padding, as well as the shadow colour.

* Disclaimer

No, it doesn’t work in IE6. If you’re still using IE6, why not upgrade to Firefox? It’s free.

Updated Heading Example

Here’s a example of where this technique could be useful. Below are two example headings, both with the same colour, size and font. The first heading does not have anything extra added to it. The second heading uses the CSS Drop Shadow effect.

Example Heading