CSS text-shadow Property

CSS text-shadow property specifies the one or more text shadow effects for the text of an element.

Usages

The following table outline the usages and version history of this property.

Default value: none
Applies to: All elements
Inherited: Yes
Version: CSS3
JavaScript Syntax: object.style.textShadow = "4px 4px 8px orange"

Syntax

Here is a syntax for the CSS text-shadow property

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

Property Values

The following table describes the values of this property.

Value Description
h-shadow Required. Specifies horizontal shadow that can be either a positive or negative value
Value can be expressed in px, pt, cm, em, etc
v-shadow Required. Specifies vertical shadow that can be either a positive or negative value
Value can be expressed in px, pt, cm, em, etc
blur-radius Specifies blur radius that can be only a positive value
Value can be expressed in px, pt, cm, em, etc
color Specifies shadow color
Value Description
color name Name of the color (i.e. red, pink, blue)
#xxxxxx Hexadecimal representation of the text color
rgb(x, x, x) RGB representation of the text color
rgba(x, x, x, x) RGBA representation of the text color
hsl(x, x, x) HSL representation of the text color
hsla(x, x, x, x) HSLA representation of the text color
initial Sets default value of this property
inherit Inherits this property from its parent element

Examples

The example below shows to sets text-shadow property.

p.one {
  text-shadow: 4px 4px 8px orange;
}
p.two {
  text-shadow: 4px 4px 8px rgba(0,0,0,0.5);
}

Run it...   »

Browser Compatibility

  • Google Chrome 4+
  • Mozilla Firefox 3.5+
  • Internet Explorer 10+
  • Opera 9.6+
  • Safari 4+

Note: Here details of browser compatibility with version number may be this is bug and not supported. But recommended to always use latest Web browser.