CSS3 text-shadow Property

Example

Basic text-shadow:

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

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

Browser Support

Internet Explorer Firefox Opera Google Chrome Safari

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


Definition and Usage

The text-shadow property applies shadow to text.

Default value: none
Inherited: yes
Version: CSS3
JavaScript syntax: object.style.textShadow="2px 2px #ff0000"


Syntax

text-shadow: h-shadow v-shadow blur color;

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

Value Description
h-shadow Required. The position of the horizontal shadow. Negative values are allowed
v-shadow Required. The position of the vertical shadow. Negative values are allowed
blur Optional. The blur distance
color Optional. The color of the shadow


Examples

Try it Yourself - Examples

Text-shadow with a blur effect
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 neon glow
This example demonstrates text-shadow with a neon glow.