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: