Text shadows

Internet Explorer 10 and Windows Store apps using JavaScript support drop shadows on text using the Cascading Style Sheets, Level 3 (CSS3) text-shadow property.

The text-shadow property

The text-shadow property applies a drop shadow effect to the specified text, and is defined in the World Wide Web Consortium (W3C) CSS Text Decoration Module Level 3. If you are familiar with the syntax for the box-shadow property, you already know the syntax for text-shadow; they are almost identical.

PropertyDescription

text-shadow

A comma-separated list of shadows that attaches one or more drop shadows to the specified text. Each shadow is made up of a space-delimited list of the following:

  • horizontal offset  Required. A positive value draws a shadow that is offset to the right of the text, a negative length to the left.
  • vertical offset  Required. A positive value draws a shadow that is offset below the text, a negative one above.
  • blur distance  Negative values are not allowed. If the blur value is zero, the shadow's edge is sharp. Otherwise, the larger the value, the more the shadow's edge is blurred.
  • spread distance  Positive values cause the shadow shape to expand in all directions by the specified radius. Negative values cause the shadow shape to contract. (Be aware that this value may not be supported by all browsers.)
  • color  Any of the supported Cascading Style Sheets (CSS) color values.

 

The syntax for the text-shadow property is identical to the syntax for the box-shadow property, except that the text-shadow property does not recognize the inset keyword.

The following example applies a dark gray shadow with a small blur value slightly to the right and under the specified text:


.myselector 
{
...
  text-shadow: 0.1em 0.1em 0.15em #333;
}

This results in the following when the selector is applied to a short text block:

The text "Internet Explorer 10" with a grey text shadow applied to it.

The W3C has a page full of text-shadow tips and examples: CSS text shadows.

API Reference

text-shadow

Samples and tutorials

CSS Text-shadow sample
How to add fun text effects using CSS

Internet Explorer Test Drive demos

Hands On: Text-shadow

IEBlog posts

Moving to Standards-based Web Graphics in IE10
CSS3 text-shadow in IE10

Specification

CSS Text Decoration Module Level 3: Section 4

Related topics

Backgrounds and borders
Mastering CSS3: 7 cool text-shadow samples you can’t miss
Mastering CSS3: Text Shadows

 

 

Show:
© 2014 Microsoft. All rights reserved.