CSS3 text-shadow Property


Example

Basic text-shadow:

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

Try it yourself »

More "Try it Yourself" examples below.


Definition and Usage

The text-shadow property adds shadow to text.

This property accepts a comma-separated list of shadows to be applied to the text.

Default value: none
Inherited: yes
Animatable: yes. Read about animatable Try it
Version: CSS3
JavaScript syntax: object.style.textShadow="2px 5px 5px red" Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Property
text-shadow 4.0 10.0 3.5 4.0 9.6

CSS Syntax

text-shadow: h-shadow v-shadow blur-radius color|none|initial|inherit;

Note: To add more than one shadow to the text, add a comma-separated list of shadows.

Property Values

Value Description Play it
h-shadow Required. The position of the horizontal shadow. Negative values are allowed Play it »
v-shadow Required. The position of the vertical shadow. Negative values are allowed Play it »
blur-radius Optional. The blur radius. Default value is 0 Play it »
color Optional. The color of the shadow. Look at CSS Color Values for a complete list of possible color values Play it »
none Default value. No shadow Play it »
initial Sets this property to its default value. Read about initial Play it »
inherit Inherits this property from its parent element. Read about inherit

Examples

More Examples

Example

This example demonstrates a text-shadow with a blur effect:

h1 {
    text-shadow: 2px 2px 8px #FF0000;
}

Try it yourself »

Example

This example demonstrates text-shadow on a white text:

h1 {
    color: white;
    text-shadow: 2px 2px 4px #000000;
}

Try it yourself »

Example

This example demonstrates text-shadow with a red neon glow:

h1 {
    text-shadow: 0 0 3px #FF0000;
}

Try it yourself »

Example

This example demonstrates text-shadow with a red and blue neon glow:

h1 {
    text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}

Try it yourself »

Related Pages

CSS3 tutorial: CSS3 Text Effects

HTML DOM reference: textShadow property



SHARE THIS PAGE

COLOR PICKER

colorpicker





Search w3schools.com:

Translate w3schools.com: