HTML - DOM Style Object textShadow Property

Quiz

HTML DOM Style Object textShadow property is used for setting or returning one or more text shadow effects. More than one shadow effects can be set using comma separated shadows list.

Syntax

Set the textShadow property:

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

Get the textShadow property:

object.style.textShadow;

Property Values

Value	Description
none	It is the default value which defines no shadow to be displayed.
h-shadow	It is a required value which specifies horizontal shadow position and it accepts negative value.
v-shadow	It is a required value which specifies vertical shadow position and it accepts negative value.
blur	It is optional which speciifies the blur distance.
color	It is optional which speciifies shadow color.
initial	It is used to set this property to it's default value.
inherit	It is used to inherit the property of it's parent element.

Return Value

It returns a string value which represents comma separated list of shadow effects applied to the text of the element.

Examples of HTML DOM Style Object 'textShadow' Property

The following examples illustrates textShadow property applied to an h3 element.

Set Text Shadow to Element

The following example sets a text shadow of green color to h3 element.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object textShadow Property
    </title>
</head>
<body>
    <p>
        Click to set text shadow.
    </p>
    <button onclick="fun()">Clip</button>
    <h3 id="shadow">
        Click to see text shadow. 
    </h3>
    <script>
        function fun() {
            document.getElementById("shadow")
                .style.textShadow = "5px 5px 1px #04af2f";
        }
    </script>
</body>
</html>

Set Multiple Text Shadow to Element

The following example sets two text shadow that is of green color and yellow color to h3 element.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object textShadow Property
    </title>
</head>
<body>
    <p>
        Click to set text shadow.
    </p>
    <button onclick="fun()">Clip</button>
    <h3 id="shadow">
        Click to see text shadow. 
    </h3>
    <script>
        function fun() {
            document.getElementById("shadow")
                .style.textShadow = "5px 5px 1px #04af2f, 8px 8px 1px yellow";
        }
    </script>
</body>
</html>

Set Text Shadow using Negative Value

The following example sets a text shadow of green color to h3 element using negative value.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object textShadow Property
    </title>
</head>
<body>
    <p>
        Click to set text shadow.
    </p>
    <button onclick="fun()">Clip</button>
    <h3 id="shadow">
        Click to see text shadow. 
    </h3>
    <script>
        function fun() {
            document.getElementById("shadow")
                .style.textShadow = "-5px -5px 1px #04af2f";
        }
    </script>
</body>
</html>

Supported Browsers

Property
textShadow	Yes 2	Yes 12	Yes 3.5	Yes 1.1	Yes 9.5

html_dom.htm

Print Page