HTML DOM Style textShadow Property

Style textShadow Property

❮ Style Object


Add shadow to a text:

document.getElementById("myP").style.textShadow = "5px 5px 1px #ff0000, 10px 10px 1px #0000ff";
Try it Yourself »

Definition and Usage

The textShadow property sets or returns one ore more shadow effects for a text.

Browser Support

textShadow Yes 10.0 Yes Yes Yes


Return the textShadow property:

Set the textShadow property: = "none|h-shadow v-shadow blur color|initial|inherit"

Note: The textShadow 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.

Property Values

Value Description
none No shadow is drawn. This is default
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. Look at CSS Color Values for a complete list of possible color values
initial Sets this property to its default value. Read about initial
inherit Inherits this property from its parent element. Read about inherit

Technical Details

Default Value: none 
Return Value: A String, representing a comma-separated list of shadow effects applied to the text of the element
CSS Version CSS3

More Examples


Return the text shadow:

Try it Yourself »

Related Pages

CSS tutorial: CSS3 Text Effects

CSS reference: text-shadow property

❮ Style Object