As the CSS3 box shadow property is still a work in progress, however, it’s been implemented as -moz-box-shadow in Firefox. This is how Mozilla tests experimental properties in CSS, with property names prefaced with “-moz-”. When the specification is finalized, the property will be named “box-shadow.”

How it works

Applying a box shadow to an element is straightforward. The CSS3 standard allows as its value:

none | <shadow> [ <shadow> ]*

where <shadow> is:

<shadow> = inset? && [ <length>{2,4} && <color>? ]

The first two lengths are the horizontal and vertical offset of the shadow, respectively. The third length is the blur radius (compare that to the blur radius in in the text-shadow property). Finally the fourth length is the spread radius, allowing the shadow to grow (positive values) or shrink (negative values) compared to the size of the parent element.

The inset keyword is pretty well explained by the standard itself:

if present, [it] changes the drop shadow from an outer shadow (one that shadows the box onto the canvas, as if it were lifted above the canvas) to an inner shadow (one that shadows the canvas onto the box, as if the box were cut out of the canvas and shifted behind it).

But talk is cheap, let’s look at some examples.

To draw a simple shadow, just define an offset and a color, and off you go:

 -moz-box-shadow: 1px 1px 10px #00f;

(Each of the examples in this article are live examples first, followed by a screen shot from Firefox 3.5 on OSX).

Similarly, you can draw an in-set shadow with the aforementioned keyword.

-moz-box-shadow: inset 1px 1px 10px #888;

With the help of a spread radius, you can define smaller (or bigger) shadows than the element it is applied to:

-moz-box-shadow: 0px 20px 10px -10px #888;

If you want, you can also define multiple shadows by defining several shadows, separated by commas (courtesy of Markus Stange):

-moz-box-shadow: 0 0 20px black, 20px 15px 30px yellow, -20px 15px 30px lime, -20px -15px 30px blue, 20px -15px 30px red;

The different shadows blend into each other very smoothly, and as you may have noticed, the order in which they are defined does make a difference. As box-shadow is a CSS3 feature, Firefox 3.5 adheres to the CSS3 painting order. That means, the first specified shadow shows up on top, so keep that in mind when designing multiple shadows.

As a final example, I want to show you the combination of -moz-box-shadow with an RGBA color definition. RGBA is the same as RGB, but it adds an alpha-channel transparency to change the opacity of the color. Let’s make a black, un-blurred box shadow with an opacity of 50 percent, on a yellow background:

-moz-box-shadow: inset 5px 5px 0 rgba(0, 0, 0, .5);

As you can see, the yellow background is visible though the half-transparent shadow without further ado. This feature becomes particularly interesting when background images are involved, as you’ll be able to see them shining through the box shadow.

Cross-Browser Compatibility

As a newer, work-in-progress CSS3 property, box-shadow has not yet been widely adopted by browser makers.

• Firefox 3.5 supports the feature as -moz-box-shadow, as well as multiple shadows, the inset keyword and a spread radius.
• Safari/WebKit has gone down a similar route as Firefox by implementing the feature as -webkit-box-shadow. Multiple shadows are supported since version 4.0, while neither inset shadows nor the spread radius feature are supported yet in WebKit.
• Finally, Opera and Microsoft Internet Explorer have not yet implemented the box shadow property, though in MSIE you may want to check out their proprietary DropShadow filter.

To achieve the biggest possible coverage, it is advisable to define all three, the -moz, -webkit, and standard CSS3 syntax in parallel. Applicable browsers will then pick and adhere to the ones they support. For example:

 -moz-box-shadow: 1px 1px 10px #00f;
 -webkit-box-shadow: 1px 1px 10px #00f;
 box-shadow: 1px 1px 10px #00f;

The good news is that the box-shadow property degrades gracefully on unsupported browsers. For example, all the examples above will look like plain and boring boxes with no shadow in MSIE.

Conclusions

The CSS3 box-shadow property is not yet as widely available in browsers (and therefore, to users) as, for example, the text-shadow property, but with the limited box shadow support of WebKit as well as the full support provided by Firefox 3.5 (as far as the current status of the feature draft is concerned), more and more users will be able to see some level of CSS box shadows.

As a web developer, you can therefore use the feature, confident that you are giving users with modern browsers an improved experience while not turning away users with older browsers.

Further resources
Documentation

• https://developer.mozilla.org/en/CSS/-moz-box-shadow
• http://dev.w3.org/csswg/css3-background/#the-box-shadow

Examples

• http://markusstange.wordpress.com/2009/02/15/fun-with-box-shadows/
• http://www.css3.info/preview/box-shadow/
• http://www.elektronotdienst-nuernberg.de/bugs/box-shadow_inset.html

The text-shadow CSS property does what the name implies: It lets you create a slightly blurred, slightly moved copy of text, which ends up looking somewhat like a real-world shadow.

The text-shadow property was first introduced in CSS2, but as it was improperly defined at the time, its support was dropped again in CSS2.1. The feature was re-introduced with CSS3 and has now made it into Firefox 3.5.

How it Works

According to the CSS3 specification, the text-shadow property can have the following values:

none | [<shadow>, ] * <shadow>,

<shadow> is defined as:

[ <color>? <length> <length> <length>? | <length> <length> <length>? <color>? ],

where the first two lengths represent the horizontal and vertical offset and the third an optional blur radius. The best way to describe it is with examples.

We can make a simple shadow like this, for example:

text-shadow: 2px 2px 3px #000;

(All of the examples are a live example first, then a picture of the working feature — so you can compare your browser’s behavior with the one of Firefox 3.5 on OSX)

If you are a fan of hard edges, you can just refrain from using a blur radius altogether:

text-shadow: 2px 2px 0 #888;

Glowing text, and multiple shadows

But due to the flexibility of the feature, the fun does not stop here. By varying the text offset, blur radius, and of course the color, you can achieve various effects, a mysterious glow for example:

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

or a simple, fuzzy blur:

text-shadow: 0px 0px 5px #000;

Finally, you can add ”more than one shadow”, allowing you to create pretty “hot” effects (courtesy of http://www.css3.info/preview/text-shadow/ css3.info):

text-shadow: 0 0 4px white, 0 -5px 4px #FFFF33, 2px -10px 6px #FFDD33, -2px -15px 11px #FF8800, 2px -25px 18px #FF2200

The number of text-shadows you can apply at the same time in Firefox 3.5 is — in theory — unlimited, though you may want to stick with a reasonable amount. Like all CSS properties, you can modify text-shadow on the fly using JavaScript:

Performance, Accessibility and Cross-Browser Compatibility

The times of using pictures (or even worse, Flash) for text shadows on the web are numbered for two reasons:

First, there are significant advantages to using text instead of pictures. Not using pictures saves on bandwidth and HTTP connection overhead. Accessibility, both for people who use screen readers and search engines, is greatly improved. And page zoom will work better because the text can be scaled instead of using pixel interpolation to scale up an image.

Second this feature is largely cross-browser compatible:

• Opera supports text-shadow since version 9.5. According to the Mozilla Developer Center, Opera 9.x supports up to 6 shadows on the same element.
• Safari has had the feature since version 1.1 (and other WebKit-based browsers along with it).
• Internet Explorer does not support the text-shadow property, but the feature degrades gracefully to regular text. In addition, if you want to emulate some of the text-shadow functionality in MSIE, you can use Microsoft’s proprietary ”Shadow” and ”DropShadow” filters.
• Similarly to MSIE, when other, older browsers do not support the feature (including Firefox 3 and older), they will just show the regular text without any shadows.

A caveat worth mentioning is the ”drawing order”: While Opera 9.x adheres to the CSS2 painting order (i.e., the first specified shadow is drawn at the bottom), Firefox 3.5 adheres to the CSS3 painting order (the first specified shadow is on top). Keep this in mind when drawing multiple shadows.

Conclusions

text-shadow is a subtle but powerful CSS feature that is — now that it is supported by Firefox 3.5 — likely to be widely adopted across the web in the foreseeable future. Due to its graceful degradation in older browsers, it can safely be used by developers and will, over time, be seen by more and more users.

Finally, some words of wisdom: Like any eye candy, use it like salt in a soup — with moderation, not by the bucket. If the web developers of the world overdo it, text-shadow may die a short, yet painful death. It would be sad if we make users flinch at the sight of text shadows like typography geeks at the sight of “Papyrus”, and thus needed to bury the feature deeply in our treasure chest.

That being said: Go try it out!

Further resources

Documentation

• https://developer.mozilla.org/en/CSS/text-shadow
• http://www.quirksmode.org/css/textshadow.html
• http://www.w3.org/TR/css3-text/#text-shadow

Examples

• http://maettig.com/code/css/text-shadow.html
• http://www.kremalicious.com/2008/04/make-cool-and-clever-text-effects-with-css-text-shadow/
• https://bug10713.bugzilla.mozilla.org/attachment.cgi?id=273985
• https://bug10713.bugzilla.mozilla.org/attachment.cgi?id=197360