Javascript Reference - HTML DOM Style textShadow Property

The textShadow property sets or gets text shadow effects.

Browser Support


`textShadow`	Yes	10.0	Yes	Yes	Yes

Syntax

Return the textShadow property:

var v = object.style.textShadow

Set the textShadow property:

object.style.textShadow='none|h-shadow v-shadow blur color|initial|inherit'

Property Values

Value	Description
none	Default value. No shadow.
h-shadow	Required. Horizontal shadow. Negative values are allowed
v-shadow	Required. Vertical shadow. Negative values are allowed
blur	Optional. The blur distance
color	Optional. The color of the shadow.
initial	Set to default value.
inherit	Inherit from parent element.

Technical Details

Default Value:	none
Return Value:	A string representing shadow effects
CSS Version	CSS3

Example

The following code shows how to add shadow to a text.


<!DOCTYPE html>
<html>
<body>
<p id="myP">This is an example paragraph.</p>
<button type="button" onclick="myFunction()">test</button>
<script>
function myFunction() {<!-- w  w  w. j  a  va2 s. co  m-->
    document.getElementById("myP").style.textShadow = "5px 5px 1px #ff0000,10px 10px 10px black";
}
</script>
</body>
</html>

The code above is rendered as follows:

Example 2

The following code shows how to get the text shadow.


<!DOCTYPE html>
<html>
<body>
<p id="myP" style="text-shadow:2px 2px green;">This is an example paragraph.</p>
<button type="button" onclick="myFunction()">test</button>
<script>
function myFunction() {<!--   w ww  . j av  a 2 s  . c  om-->
    console.log(document.getElementById("myP").style.textShadow);
}
</script>
</body>
</html>

The code above is rendered as follows: