CSS3 text-shadow in IE10


IE10 in the Windows Developer Preview introduces support for hardware-accelerated CSS3 text-shadow. Text-shadow is one of the top requested features from Web developers. It enables text effects that were previously difficult or impossible to accomplish in a standards-friendly way without resorting to inline images of text.

Text-Shadow in IE10

As its name suggests, text-shadow is a CSS property that draws a shadow behind text.

Example of a purple text-shadow behind text
Example of a purple text-shadow behind text

Use it to draw attention to text and to give the text some depth. In some cases, especially with text over an image or color background, text-shadow can be used to add contrast and improve readability. Because IE10 as well as other browsers support the standard, no-vendor-prefix form of text-shadow, sites using text-shadow today will just work in IE10. As part of our commitment to standards-based quality, we’ve submitted 10 test cases to the CSS3 Text Test Suite with a pass rate of 9/10.

Twitter sign-in page in IE9 with no text-shadow A subtle text-shadow appears when navigating to Twitter in IE10
Example: a subtle text-shadow appears when navigating to Twitter in IE9 (left) and IE10 (right)

No text-shadow on an auto service website in IE9 text-shadow appears when navigating to an auto service website in IE10
Example: text-shadow appears when navigating to an auto service Web site in IE9 (left) and IE10 (right)

IE10 supports the same definition of <shadow> across box-shadow and text-shadow as called out in the text-shadow spec: “<shadow> is the same as defined for the ‘box-shadow’ property except that the ‘inset’ keyword is not allowed.” This definition is color plus four parameters: x offset, y offset, blur radius, and spread distance. Only IE10 currently supports the spread distance parameter (see “The ‘spread’ parameter and interoperability,” below).

How to Use Text-Shadow

The most basic text-shadow requires an x and y offset:

.shadow1 { color: black; text-shadow: 2px 2px; }

example of text-shadow: 2px 2px;

Most of the time, you will also want to specify a text-shadow color as well:

.shadow2 { color: black; text-shadow: #87CEEB 1px 3px; }

example of text-shadow: #87CCEB 1px 3px;

The color parameter can be placed at the beginning or end of the shadow definition. You may also add a blur radius, which describes the amount the shadow should be blurred using a Gaussian blur algorithm:

.shadow3 { color: black; text-shadow: 1px 3px 3px rgba(135, 206, 235, 1); }

example of text-shadow: 1px 3px 3px rgba(153, 204, 255, 1);

A spread distance may also be specified. A positive value describes the amount that a shadow expands, whereas a negative value describes the amount that a shadow contracts:

.shadow4 { color: black; text-shadow: skyblue 0px 0px 0px 4px; }

example of text shadow: skyblue 0px 0px 0px 4px;

The effect of a text-shadow with positive spread can often be imitated by drawing enough 0-spread shadows. However, the markup to achieve this is more complex and may result in a lower-performance, lower-quality shadow:

.shadow4_nospread { color: black; text-shadow: skyblue 0px 2px, skyblue 2px 0px, skyblue -2px 0px, skyblue 0px -2px, skyblue -1.4px -1.4px, skyblue 1.4px 1.4px, skyblue 1.4px -1.4px, skyblue -1.4px 1.4px; }

example of multiple shadows used to simulate spread-distance

The spread parameter makes accomplishing the effect much easier. It can also be used to accomplish effects that otherwise impossible to achieve when negative values are used:

.shadow5 { text-shadow: 5px 5px 2px -2px #9966CC; }

example of text-shadow: 5px 5px 2px -2px #9966CC;

The above five parameters describe only a single shadow. The text-shadow property supports a list of shadows, stacked from front to back. Below is a text-shadow with a partially transparent white shadow drawn on a yellow shadow, drawn on top of an orange one which is drawn above a red one:

.shadow6 { text-shadow: rgba(255, 255, 255, .5) 1px 1px, yellow 2px 3px, rgba(255, 153, 0, .7) 3px 6px, rgba(255, 0, 0, .5) 4px 8px; }

example of multiple text shadows on one string

The ‘spread’ parameter and interoperability

At this time, only IE10 supports spread distance. The lack of support can be attributed in part to conflicting implications in the W3C spec, which states the computed value is “a color plus three absolute <length>s” while also stating “<shadow> is the same as defined for the ‘box-shadow’ property except that the ‘inset’ keyword is not allowed.” The box-shadow spec defines <shadow> as “specified by 2-4 length values, [and] an optional color.”

When interoperability is the goal, keep in mind that a text-shadow with a spread parameter will be parsed as invalid by browsers that do not support it. Your markup should include a fallback version of text-shadow without ‘spread’ should you choose to use the last parameter, otherwise no text-shadow will appear in browsers that do not support spread.

.shadow7 {

color: black;

text-shadow: #99FFCC 0px 0px 10px; /* for browsers without spread distance */

text-shadow: #99FFCC 0px 0px 10px 10px; /* for browsers with the full spec */

}

example of a string of text with spread support example of a string of text without spread support

Text spread enables many more effects, such as stroked text (as seen above), a darker blurred shadow, or a skinnier shadow. We welcome your feedback regarding the ‘spread distance’ parameter and are committed to conversing with the CSS Working Group to improve clarity around text-shadow in the CSS Text specification.

Improving upon the past

In older versions of Internet Explorer, the proprietary DXImageTransform.Microsoft.Shadow, DXImageTransform.Microsoft.DropShadow, DXImageTransform.Microsoft.Glow, and DXImageTransform.Microsoft.Blur filters were often used to produce the text shadow effect that is now supported in IE10 via CSS3 text-shadow. Instead of using these DXImageTransform filters to achieve a text shadow effect, use the text-shadow property for IE10. Not only does it achieve the effect in a standards-compliant interoperable way, but hardware-accelerated CSS3 text-shadow also provides significant performance gains over the older alternative.

Fallback behavior

Sites using text-shadow today degrade gracefully when rendering without a text-shadow. In many uses of text-shadow on the Web now, the text shadow is subtle decoration that adds visual depth. However, text-shadow can also be used form more creative visual effects.

IE9 example of text-shadow use that has poor fallback IE10 example of text-shadow use that has poor fallback
Example of text-shadow use that has poor fallback viewed in IE9 (left) and IE10 (right)

If you need to support browsers without text-shadow support, make sure to use feature detection for textShadow in the CSSOM to conditionally change the color of your text when taking this artistic liberty.

Using feature detection:

if (typeof document.body.style.textShadow == ‘undefined’) {

// text-shadow is not supported

document.body.style.color = ‘black’;

}

else {

// text-shadow is supported

document.body.style.color = ‘#FFFFCC’;

document.body.style.textShadow = ‘turquoise -2px -2px, black 2px 2px’;

}

Give text-shadow a try

Try using text-shadow today! If you already are, explore the new possibilities that the ‘spread’ parameter unlocks. Using multiple shadows and tweaking the different parameters can create some interesting effects.

Here’s my gallery of interesting and silly text-shadow effects:

A gallery of text shadow samples
Click here to view a live copy of this gallery in a separate tab

Note that you can use text-shadow with WOFF fonts and input elements and in conjunction with CSS3 Transitions and Animations! If you are using a browser that supports both text-shadow and CSS Transitions and Animations, view the gallery above in a separate tab to see the features in action together. You can then use View Source or your browser’s developer tools to view the markup.

Get your creative juices flowing and try out text-shadow in IE10 in the Windows Developer Preview. The IE Test Drive demo Hands On: text-shadow offers an interactive way to experiment with text shadow. See how easy it is to make your text spring to life!

—Jennifer Yu, Program Manager, Internet Explorer

Comments (30)

  1. Anonymous says:

    The PM's are posting again, a new preview must be imminent…

    Congrats on the team for implementing this feature. (although a little late.)

    Let's hope developers will retain some good taste and not plaster this style on every font on their site 😉

  2. Anonymous says:

    The "Glowing WOFF Text" is pretty cool.

  3. Anonymous says:

    Spread? That's awesome! No more four-shadows hacks!

  4. Anonymous says:

    When will be available ie10pp3 for win7?

  5. Anonymous says:

    Looks like text-shadow doesn't work within SVG. Any plans to support that? Would be very valuable in mapping.

  6. Real McCoy says:

    I agree with Michel N.

    connect.microsoft.com/…/svg-filter-dropshadow-support

    Drop-shadow support via filters in SVG isn't supported. Kindly inform us if its support is planned for IE10-RTW/GA?

    Looking nice though via CSS!! 🙂

    thanQ.

  7. Anonymous says:

    What Michel N said.

  8. Correct: CSS text-shadow does not apply to SVG. That's the standards-compliant behavior.

    IE10 does support drop-shadow via filters on SVG content. Visit ie.microsoft.com/…/hands-on_svg-filter-effects.htm in IE10, flip to the Text tab in the right column, and experiment with filters on SVG.

  9. Real McCoy says:

    Gosh! ever heard of term "typo"? Never mind its Michael N.

  10. Anonymous says:

    I am loving IE10 and it's compatibility advances. Thank you IE team.

    However I fear drop shadow is the new <blink> or animated gif. Drop shadows were cool… in 2005.

    With the number of people and frequency of complaining about this feature, I feel the web will be ruined within months now.

    The new fad will be browsers that don't support drop shadow to keep people from going blind.

  11. Anonymous says:

    @Ted Jhonson[MSFT], please take a moment and open the following link in IE10 and Chrome12+ and there you will find the problem with DropShadow:

    tavmjong.free.fr/…/svg_test.svg

  12. @Neil: Thank you. Good reminder. In the IE10 preview that's part of Windows Developer Preview, drop shadows currently work on the <text> element but not subordinate <tspan> elements. That's a bug that will be fixed before final release.

  13. Real McCoy says:

    @Mixed feelings, I think I understand what you are trying to say but the point is; people at W3C decided the standard and recommended implementation of user-agent, not the vendor. Moreover, those browsers that haven't implemented CSS shadow property or anything that is W3C recommendation, are not considered fully-compliant. Btw, these tools are ultimately making the graphic-designers' life easy, like with this they don't need to use photoshop to apply shadow on text. So at any point in time, if you feel that you are going blind due to some text shedding noisy shadow, blame the designer! 🙂

    @Ted Johnson [MSFT], thanks for the clarification. These implementations would certainly revolutionize Internet Explorer 🙂

  14. Anonymous says:

    @Jennifer Yu [MSFT]

    How is fractional pixel resolved? I see nowhere how fractional pixel in the official W3C TRs (draft or CR or PR). 1.4px (-1.4px) could be resolved as 2px (-2px) or as 1px (-1px): either way, there is no official normative parsing rule in the W3C specs.

    "hardware-accelerated CSS3 text-shadow": why do you say hardware-accelerated? Is text-shadow really processed by GPU in IE10PP3?

    Gérard Talbot

  15. Anonymous says:

    @Jennifer Yu [MSFT]

    Your examples also mix pt unit with px unit. 3pt is 4px when 96DPI is set; you chose 32pt in outlined class and text3d class and this will cause rounding up or rounding down situations.

    Also, font-family is not perfectly and universally the same under different operating systems. Tahoma is not universally supported by default on other operating systems so the default generic sans-serif will be used where the x-height can be different. Again, another source of difference of rendering when vertical-align: middle will be applied.

    Finally, text-shadow: white 0px -1px 0px 4px, rgba(255, 0, 0, .8) 0px -4px 0px 7px, rgba(255, 0, 0, .5) 0px -6px 0px 12px, rgba(255, 0, 0, .5) 0px -7.5px 0px 15px;

    will most likely be rendered slightly differently because of fractional pixel and other factors (vertical-align: middle, available font-family used).

    IMO, examples like that should always avoid fractional pixels and non-convertible unit values like 32pt.

    Gérard Talbot

  16. Anonymous says:

    This should have been implemented in IE9.

  17. Anonymous says:

    @David S

    You have no taste. Neither does Microsoft judging from these examples.

  18. Anonymous says:

    Worth a mention that for some basic text shadows, you can get a decent-ish match in IE 9 and lower:

    whattheheadsaid.com/…/creating-a-nice-text-shadow-in-internet-explorer

    I use it on a couple of sites and, even though there's a clear difference when comparing browsers side by side, it's only the same as the difference between `text-shadow` implementations in current browsers anyway.

  19. Anonymous says:

    YESSSSSS!!!!!!!!!!!!!!!!!!!!!!!!! Thank you IE Team! You guys rock! Now to convince everyone to upgrade to Windows 7 or 8.

  20. Anonymous says:

    @Jim. It's all CSS so it's awesome. Why don't you share what you consider to be "tasteful"? Don't tell me you are one of those guys who is mad because there is no SVG Font support.

  21. Anonymous says:

    @Gérard: IE10's text-shadow is hardware-accelerated using the new Windows 8 Direct2D Image Effects subsystem (see code.msdn.microsoft.com/…/Direct2D-Image-Effects-4819dc5b). D2D Image Effects uses pixel shaders executed in the GPU.

    Regarding fractional pixels and units other than pixels: both IE9 and IE10 support fractional pixel widths in CSS and throughout the DOM.

  22. Anonymous says:

    @Gérard Talbot, unless you are a troll, you would have appreciated the answer. But you are a troll… just saying!

  23. Anonymous says:

    @Jennifer Yu [MSFT]

    There is no normative parsing rule in the W3C specs regarding how fractional pixels are resolved or should be resolved. You said "both IE9 and IE10 support fractional pixel widths in CSS and throughout the DOM". I do not understand why you are saying that. By definition, a pixel is the smallest element on a screen given its resolution.

    I see no normative parsing rules on how fractional pixel in the official W3C TRs (draft or CR or PR) should be handled. Please quote the spec if you think I'm wrong.

    Gérard Talbot

  24. Anonymous says:

    If you look into blogs.msdn.com/ie and after 20-30 minutes if u try to post a comment as a guest user (without login) and hit post button, the page will refresh instantly without posting the comment and there is no way to get it back. I guess there is some timeout issue with page postback. Please look into it and rehash the code on both domains. This behavior is independent of the vender and version of browser. Just wait for couple of minutes (say it took you 30 minutes to read the entire post and all the comments) and then post a comment as anonymous…

    OAN, with Windows Team Blog on IE10 dev preview (on Windows8 dev preview), with Browser Mode Internet Explorer 10 (page default on load!) the login session doesn't persist. To reproduce this bug, open windowsteamblog.com in IE10, click Sign in link at top right corner, provide credentials and click sign in button. On the next page the website wouldn't recognize your session. As a workaround, press F12 change the "browser mode" to IE9 and the page will refresh with your handle and SignOut button at the top right corner. Like IE-Team suggested in the good programing practices that we need to check for the feature in browser rather than the vendor and version of user-agent, it seems like some code requires attention. Please forward the bug report to IE team, if the issue is with IE10.

    Please fix these issue.

  25. Anonymous says:

    @Gerard Talbot

    see: http://www.w3.org/…/css3-values under heading 5.2

    Apparently, 1px is equal to 1/96th of an inch.

  26. Anonymous says:

    About time.

    "It enables text effects that were previously difficult or impossible to accomplish."

    In IE.

  27. Anonymous says:

    So it was easy in other browsers even without text-shadow?  Because your quote is saying it was hard before text-shadow was invented, not whatever your trying to twist it to say.

  28. Anonymous says:

    That's great news 🙂 – now let us have a preview version to try out this much missed feature.

  29. Anonymous says:

    Any planning to support css border-image?  This would also be useful.  

    http://www.w3.org/…/css3-background

  30. Anonymous says:

    What a surprise. Late to the game again, as usual. Your blog is hilarious and you should be a comedian. IE gets closer, one tiny-nobody-cares-about feature at a time.

    This feature, like most, should have been in IE9 but the braindead MS is still in 'release once per year' (or maybe 6 years later in the case of IE7) mode. No feature/delta updates, always 'security'. You were first to make text-overflow:ellipsis, and so many other proprietary extensions that are only now starting to become standards (and text-overflow JUST appeared in FF7), yet still forcing us to use filter/-ms-filter (which sucks in terms of performance and can sometimes affect usability, kills ClearType!) to do effects like this without having to rely upon images. To top it off, IE9's performance is barely better than IE8 (while IE8 is a big improvement from 7, nearly 2x performance increase). Yet Chrome screams at 5+x the speed of IE9 any day and so does Firefox. Want (realistic) proof? Go to jsperf!

    Again, this blog is amazing. And I see more people switching to Webkit-based browsers everyday. I wish they could see and understand the kinds of 'advancements' you guys are making here.