Partager via

How to add fun text effects using CSS

  • Article

Internet Explorer 10 introduces support for hardware-accelerated text shadows using the text-shadow Cascading Style Sheets (CSS) property. Support for the text-shadow property has been one of Web developers' top requested features. It enables text effects that were previously difficult or impossible to accomplish without resorting to inline images of text.

CSS text shadows are defined in the Section 10.3 of the World Wide Web Consortium (W3C)'s CSS Text Level 3 specification. In addition to webpages in Internet Explorer 10, Windows Store apps using JavaScript also support the text-shadow property. This topic describes the basics of implementing text shadows, and then shows you the fun text effects that text-shadow makes possible.

This topic contains the following sections:

  • The text-shadow property's syntax
  • Specifying property values
  • Improving on the past
  • Fallback behavior
  • Give text-shadow a try
  • Next steps

The text-shadow property's syntax

Use text shadows to draw attention to text and to give it depth. Use text-shadow to add contrast and improve the readability of text over an image or color background. Because Internet Explorer 10 and most other popular browsers support the text-shadow standard, no vendor prefix (such as "-ms-," "-webkit," "-moz-" and so on) is needed. Therefore, sites already using text-shadowwill work in Internet Explorer 10 automatically.

The text-shadow property applies a drop shadow effect to the specified text, and is easy to implement. If you've used the box-shadow property, you already know the text-shadow property's syntax; they're almost identical.

Property Description

text-shadow

One or more space-delimited lists of shadow parameters, as specified here. If more than one shadow is specified, the parameter lists are separated from each other by commas.

  • 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 might not be supported by all browsers.)
  • color Any of the supported 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 doesn't recognize the "inset" keyword.

Here's a basic example of the text-shadow property. The following snippet applies a dark gray shadow with a small blur value slightly to the right and under the text it's applied to:

.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:

Specifying property values

You must specify, at a minimum, two values for the text-shadow property—the x- and y-offsets.

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

The preceding code snippet appears as follows.

You'll usually want to specify a color for the shadow. In the following example, "black" indicates the color of the text itself, while "#87CEEB" is the hexadecimal representation of the shadow color, which is a light shade of blue.

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

The preceding code snippet appears as follows.

The color parameter can be placed at the beginning or end of the shadow definition. You can also add a blur radius, which describes how much the shadow should blur using a Gaussian blur algorithm. For instance, see the following example code:

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

The preceding code snippet appears as follows.

You can also specify a spread distance. A positive value describes the amount that a shadow expands, whereas a negative value describes the amount that a shadow contracts. The following code example has a positive spread distance applied:

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

The preceding code snippet appears as follows.

The effect of the text-shadow property that has positive spread can often be imitated by drawing enough zero-spread shadows. However, the markup to achieve this is more complex and might result in a lower-performance, lower-quality shadow. This might be necessary, though, to imitate spread in browsers that don't support it. For instance, consider the following code example:

.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 preceding code snippet appears as follows.

The spread parameter makes accomplishing this effect much easier. You can also use it to create effects that would otherwise be impossible to achieve when negative values are used, such as in the following example:

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

The preceding code snippet appears as follows.

The five parameters shown here describe a single shadow. The text-shadow property also supports a list of shadows, stacked from front to back.

The next example shows a text shadow that's a composite of five shadows, listed here from front to back:

  • a partially transparent white shadow
  • a yellow shadow
  • an orange shadow, which is drawn above
  • a red shadow
.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 preceding code snippet appears as follows.

Because, as of this writing, there's varying support for the spread distance parameter among browsers, consider including a fallback for maximum interoperability. The spread parameter will be parsed as invalid by browsers that don't support it. Make sure your markup includes a fallback version of text-shadow without the spread parameter if you decide to use the last parameter, otherwise no text shadow will appear in browsers that don't support spread.

.shadow7 {
  color: black;
  text-shadow: #99FFCC 0px 0px 10px; /* for browsers without spread support */
  text-shadow: #99FFCC 0px 0px 10px 10px; /* for browsers with spread support */
}

In browsers that don't support the spread parameter, the preceding code snippet appears as follows.

In browsers that support the spread parameter, including Internet Explorer 10, the preceding code snippet appears as follows.

Text spread enables many more effects, such as stroked text, a darker blurred shadow, or a skinnier shadow.

Improving on the past

If you're familiar with Windows Internet Explorer's proprietary support for CSS filters, you might already know that text shadows could previously be produced using the DXImageTransform.Microsoft.Shadow, DXImageTransform.Microsoft.DropShadow, DXImageTransform.Microsoft.Glow, and DXImageTransform.Microsoft.Blur filters. Be aware that CSS filters are no longer supported in Internet Explorer 10, except when the browser is in an older document mode. (For more info about document modes, see Defining document compatibility.)

Instead of using these DXImageTransform filters to achieve a text shadow effect, use the text-shadow property for Internet Explorer 10. Not only does Internet Explorer 10 achieve the effect in a standards-compliant, interoperable way, graphics are hardware accelerated, which provides significant performance gains over the deprecated alternative.

Fallback behavior

Sites using the text-shadow property today degrade gracefully when they are rendered in browsers that don't support 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. Be careful, though, that you account for browsers that don't support the text-shadow property. For instance, the following image is of a bit of text with the text-shadow property applied to it, as seen in Windows Internet Explorer 9:

The text is supposed to appear like this in Internet Explorer 10 and other browsers that support text-shadow:

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

For instance, the following will produce proper fallback behavior when viewed in browsers that don't support text-shadow:

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 our gallery of interesting and silly text-shadow effects:

Next steps

You can use text-shadow with Web Open Font Format (WOFF) fonts and input elements and in conjunction with Cascading Style Sheets, Level 3 (CSS3) transitions and animations. If you're using a browser that supports both text-shadow and CSS transitions and animations, visit the gallery linked to previously to see the features in action together. You can then view the source HTML or use F12 developer tools to view the markup.

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!