Search over 1.4 million articles by over 600 experts
  1. Home
  2. Computing & Technology
  3. Web Design / HTML

More from About.com

Browse Topics A-Z

text-shadow

By Jennifer Kyrnin, About.com

text-shadow Description:

The text-shadow property defines a comma-separated list of shadow effects to be applied to the element's textual content.

text-shadow in CSS Versions:
text-shadow Syntax:

text-shadow: none | [<color> || <length> <length> <length>? ,]* [<color> || <length> <length> <length>?] | inherit

  • none
    No text shadow.
  • color
    The color of the text-shadow.
  • length
    The first two length items are the location (down and right) of the shadow. The third is the amount of blurring.
  • inherit
    The element should have the same text-shadow setting as the parent.
text-shadow Initial Value:

none

text-shadow Applies To:

All elements.

text-shadow Inheritance:

This property is not inherited.

text-shadow Browser Support:

Currently unsupported.

text-shadow Examples:

basic shadow

<h1 style="text-shadow : 0.2em 0.2em;">
This headline will have a .2 em down and right shadow the same color as the foreground.
</h1>

Blurred outline

<h1 style="text-shadow : 1px 2px 5px red;">
This headline has a blurred red headline.</h1>

Two-tone shadow

<h1 style="text-shadow : 1px 1px red, 2px 2px blue;">
This headline will have a two-tone red and blue shadow.
</h1>
text-shadow Special Notes:
  • This property is not currently supported by any commonly used Web browsers.
  • Be careful when you use it to make shadows where the text color is the same color as the background. Some search engines will see this as spoofing, even if the text is visible because of the shadow.
  1. Home
  2. Computing & Technology
  3. Web Design / HTML
  4. CSS
  5. Style Properties
  6. CSS Style Property: text-shadow

©2008 About.com, a part of The New York Times Company.

All rights reserved.