Mozilla

stylish text with text-shadow

This post is from Frederic Wenzel, who works on Mozilla’s Web Development team.

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;
A simple shadow

(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;
I don’t like blurs

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;
Glowing text

or a simple, fuzzy blur:

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

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
Multiple shadows are hot

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:

Animated shadows with JavaScript


Start/stop animation

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

Examples

24 comments

Comments are now closed.

  1. Pingback from nitot's status on Wednesday, 10-Jun-09 13:43:10 UTC - Identi.ca on June 10th, 2009 at 6:43 am:

    [...] My Web dev friends will love this: stylish text with text-shadow: http://hacks.mozilla.org/2009/06/text-shadow/ [...]

  2. Pingback from shemuuu's status on Wednesday, 10-Jun-09 13:52:10 UTC - Identi.ca on June 10th, 2009 at 6:52 am:

    [...] http://hacks.mozilla.org/2009/06/text-shadow/ via @nitot [...]

  3. Pingback from stylish text with the CSS text-shadow property | fredericiana on June 10th, 2009 at 7:26 am:

    [...] text with the CSS text-shadow property This is a cross-post of an article I wrote for the hacks.mozilla.org blog. It shows off some of the fun stuff web developers can do [...]

  4. Pingback from 颠覆网络35天 ─ 使用文字阴影来烘托效果 < MJiA on June 10th, 2009 at 8:00 am:

    [...] 原文地址:stylish text with text-shadow [...]

  5. Francisco Costa wrote on June 10th, 2009 at 10:00 am:

    Great trick!

  6. Shahbaz Javeed wrote on June 10th, 2009 at 11:23 am:

    Looks like the latest Opera 10 beta uses the CSS3 shadow rendering order. The flaming text looks similar to the reference rendering.

  7. Garbled wrote on June 10th, 2009 at 12:06 pm:

    Oh god, you just had to mention Papyrus!

  8. Frederic Wenzel wrote on June 11th, 2009 at 2:12 am:

    Shahbaz: Thanks for the heads-up! I am glad to hear that. It’ll make developers’ lives much easier!

    Garbled: Oh yes, you know I had to :)

  9. Neil Rashbrook wrote on June 11th, 2009 at 3:12 am:

    For me the glowing text effect wasn’t very obvious for some reason…

  10. Pingback from Ajaxian » Animating SVG with Canvas and Burst on June 11th, 2009 at 5:55 am:

    [...] stylish text with text-shadow [...]

  11. Pingback from Ajax Girl » Blog Archive » Animating SVG with Canvas and Burst on June 11th, 2009 at 7:44 am:

    [...] stylish text with text-shadow [...]

  12. John allsopp wrote on June 11th, 2009 at 3:14 pm:

    For folks who’d like to play with text shadow, and other cool CSS3 stuff supported in Firefox 3.5, try

    http://westciv.com/tools/shadows/
    http://westciv.com/tools/boxshadows/
    http://westciv.com/tools/transforms/

    john

  13. Frederic Wenzel wrote on June 12th, 2009 at 1:44 am:

    John: Thanks for posting these links, being able to see the effect change in real time, that’s great!

  14. Pingback from shadow boxing with -moz-box-shadow at hacks.mozilla.org on June 12th, 2009 at 5:00 am:

    [...] 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 [...]

  15. Florian wrote on June 12th, 2009 at 12:01 pm:

    The statement that this degrades gracefully is not quite true, some of the examples look quite horrible in opera mini, which seems not to implement blur radius (and of course the absolute pixel values are far too large for tiny cellphone fonts).

  16. Pingback from the text-shadow spotlight at hacks.mozilla.org on June 25th, 2009 at 9:55 pm:

    [...] Johnson has put together another fun demo. He’s using some JavaScript and the new text-shadow property to build a spotlight effect. It’s embedded below. If you can’t view it, click [...]

  17. Pingback from Monthly Interesting Links Roundup (June 2009) - 2 on June 26th, 2009 at 12:37 am:

    [...] And for those interested in all the things that will be possible on the web sometime in the future. You’ll need Firefox 3.5 (some might work on Safari 4 too) Shadows: http://hacks.mozilla.org/2009/06/text-shadow/ [...]

  18. Pingback from CSS Design: Text Shadow on July 1st, 2009 at 3:01 am:

    [...] http://hacks.mozilla.org/2009/06/text-shadow/ [...]

  19. Pingback from the text-shadow spotlight : Scriptyx.com on July 1st, 2009 at 11:35 am:

    [...] Johnson has put together another fun demo. He’s using some JavaScript and the new text-shadow property to build a spotlight effect. It’s embedded below. If you can’t view it, click through [...]

  20. Pingback from 谋智社区 » Blog Archives » 颠覆网络35天 ─ 使用文字阴影来烘托效果 on July 8th, 2009 at 10:25 pm:

    [...] 原文地址:stylish text with text-shadow [...]

  21. Pingback from Using Text Shadow in HTML/CSS | Admix Web on December 4th, 2009 at 9:40 am:

    [...] stylish text with text-shadow [...]

  22. CSS Design Blog wrote on December 10th, 2010 at 2:09 am:

    Text-Shadow is one of the most interesting properties if you want to realize Text like all the apple pages do.

  23. Pingback from Crear imágenes usando solo CSS | Código Web on January 25th, 2011 at 3:53 pm:

    [...] de las que he mencionado, también destacaría a text-shadow y [...]

  24. zavera wrote on January 12th, 2013 at 12:33 am:

    Great tricks with text-shadow, i think css3 is making things more easier for designers and the MSIE 9 and all other lattest browsers are fully supporting these text effects!

Comments are closed for this article.