X
HOME HTML CSS JAVASCRIPT SQL PHP JQUERY XML ASP.NET MORE...
REFERENCES | EXAMPLES | FORUM | ABOUT

Style textShadow Property

Style Object Reference 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 Reference Style Object

Your suggestion:

Close [X]

Thank You For Helping Us!

Your message has been sent to W3Schools.

Close [X]
Search w3schools.com:

WEB BUILDING

Download XML Editor FREE Website BUILDER Free HTML5 Templates

SHARE THIS PAGE

facebook