Menu

CSS3 text-shadow in IE10

September 29th, 2011

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.

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.

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; }

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

.shadow2 { color: black; text-shadow: #87CEEB
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);
}

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
; }

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; }

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; }

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;
}

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 */

}

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.

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:

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