CSS3 text-shadow Property

 CompleteCSS Reference

Example

Basic text-shadow:

h1
{
text-shadow: 2px 2px #ff0000;
}

Try it yourself »
More examples at the bottom of this page.

---

Browser Support

    

The text-shadow property is supported in all major browsers, exceptInternet Explorer.

---

Definition and Usage

The text-shadow property applies shadow to text.

Default value:noneInherited:yesVersion:CSS3JavaScript syntax:object.style.textShadow="2px 2px #ff0000"

---

Syntax

text-shadow: h-shadow v-shadow blurcolor;

Note: The text-shadow property attaches oneor more shadows to text. The property is a comma-separated list ofshadows, each specified by 2 or 3 length values and an optionalcolor. Omitted lengths are 0.

ValueDescriptionPlay ith-shadowRequired. The position of the horizontal shadow. Negative valuesare allowedPlay it »v-shadowRequired. The position of the vertical shadow. Negative values areallowedPlay it »blurOptional. The blur distancePlay it »colorOptional. The color of the shadow. Lookat CSSColor Values for a complete list of possiblecolor valuesPlay it »

---

Try it Yourself - Examples

Text-shadow with a blureffect
This example demonstrates a text-shadow with a blur effect.

Text-shadow on white text
This example demonstrates text-shadow on a white text.

Text-shadow with neonglow
This example demonstrates text-shadow with a neon glow.

---

Related Pages

CSS3 tutorial: CSS3 Text Effects