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

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.

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

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:

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

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:

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:

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:

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:

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:

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.

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.

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:

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:

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

IEBlog