CSS Text-Shadow in Safari, Opera, Firefox and more

The CSS 2 property text-shadow is supported in Safari since version 3 (also available for Windows), Opera since 9.5, Firefox since 3.1, Google Chrome since version 2, Konqueror and iCab. In fact, text-shadow is supported by all browsers that are based on WebKit, the rendering engine behind Safari and Chrome. Internet Explorer 8 does not support such text shadows (except for some DirectX image transform filters).

Animated multiple Shadows (requires JavaScript)

Start/stop animations.

Multiple Shadows

Safari 3 supported one shadow only. Only the first shadow was displayed.

Safari 4 supports multiple shadows.

Opera 9.5 supported at most six shadows. Later, this limitation was dropped.

Please note that Opera painted the shadows in the wrong order. This was fixed in Opera 10.5.

Classical Shadows

Glowing Borders

Unusual Effects

Text Embossing Technique With CSS

The rules around how to correctly add an embossed effect to any text depending on the colors used. You have to get the angle and the color combinations in the right place.

Light Text on a Dark Gradient

Generally the rule for lighter text on a darker gradient is as follows, use a text-shadow of -1px on the y axis, with the shadow as a dark color. In the example below, I have used a dark blue to reflect a similar shade of blue as the gradient behind it:

text-shadow: 0px -1px 0px #374683;

Dark Text on a Lighter Gradient

So to do the opposite, we flip everything on its head. The text-shadow is now a positive value at 1px on the x axis, with the text-shadow color being light, or pretty much white in this case:

text-shadow: 0px 1px 0px #e5e5ee;

Emulating text-shadow in Internet Explorer

Though it pains me to do it, I know many of you will not be interested in using CSS unless it works in Internet Explorer. I will re-emphasize that you should only use text-shadow for decoration, and you should never make your page rely on it. As such, you should be able to make your pages look extra nice in good browsers, while still being OK for Internet Explorer. However, if you still feel the need to make it work in Internet Explorer, there are two proprietary CSS filters that IE can use (the trick relies on filters which did not work in IE 8 betas 1 and 2 since the hasLayout bug was fixed). They are both very limited compared with the proper text-shadow style, but then, this is IE, and that is nothing new.

The two filters are "glow" and "dropshadow". Glow emulates a blurred text-shadow, but cannot be offset. Dropshadow emulates an offset shadow, but cannot be blurred, and cannot be applied to elements with their own backgrounds. So both have very significant problems.

On top of that, both can only be applied to an element if it also has one of the following styles set: display:block+height, display:block+width, or position:absolute. This limits their use even more. Both are also applied to all parts of the element, not just its text. So if you want to use this effect in IE, it is best to wrap the text inside an otherwise unstyled element (such as a span), set one of those styles on it, then apply one of the filters, depending on which effect you want. In general, the glow effect is the one you would want to use.

filter: glow(color=#ffff00,strength=3); filter: dropshadow(color=#ffff00,offX=5,offY=5);

In both cases, the effect will only be applied over the element itself. If the shadow or glow is large enough to exceed the bounds of the element, it will be truncated.

Because these filters are not valid CSS, and because the other styles required by IE may cause unwanted effects in other browsers, it is best to isolate the IE-specific garbage inside conditional comments to protect good browsers from it:

Text that should have a shadow

This text should have a shadow.