Latest web development tutorials
 

Style textShadow Property

< Style Object

Example

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

Internet Explorer Firefox Opera Google Chrome Safari

The textShadow property is supported in all major browsers.

Note: The textShadow property is not supported in Internet Explorer 9 and earlier versions.


Syntax

Return the textShadow property:

object.style.textShadow

Set the textShadow property:

object.style.textShadow="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

Example

Return the text shadow:

alert(document.getElementById("myP").style.textShadow);
Try it Yourself »

Related Pages

CSS tutorial: CSS3 Text Effects

CSS reference: text-shadow property


< Style Object