HTML - DOM Style Object boxShadow Property

Quiz

HTML DOM Style Object boxShadow property used to set or get the shadow around or inside element's frame.

Syntax

Set the boxShadow property:

object.style.boxShadow= "none | h-offset | v-offset | blur | spread | color | inset | initial | inherit";

Get the boxShadow property:

object.style.boxShadow;

Property Values

Value	Description
none	It is the default value where no shadow is displayed.
h-offset	It is a required property value which specifies position of horizontal shadow.
v-offset	It is a required property value which specifies position of vertical shadow.
blur	It is an optional value which specifies the blur distance of box shadow.
spread	It is an optional value which specifies the spread radius.
color	It is used to specify the color of the shadow.
inset	It sets the shadow inside of the element.
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 box shadow property of an element.

Examples of HTML DOM Style Object 'boxShadow' Property

The following examples illustrates different property values of boxShadow property.

Add Box Shadow to Element

The following example sets the h-offset, v-offset and color of box shadow.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object boxShadow Property
    </title>
    <style>
        #shadow {
            position: absolute;
            width: fit-content;
            background-color: #04af2f;
            color: white;
        }
    </style>
</head>
<body>
    <p>Click to add box shadow</p>
    <button onclick="fun()">Add</button>
    <div id="shadow">
        <p>Welcome to Tutorials point</p>
    </div>
    <script>
        function fun() {
            document.getElementById("shadow")
                .style.boxShadow = "10px 20px aqua";
        }
    </script>
</body>
</html>

Add 'blur' and 'spread' to Box Shadow

This example adds blur and spread to box shadow where blur is 40px and spread is 30px.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object boxShadow Property
    </title>
    <style>
        #shadow {
            position: absolute;
            width: fit-content;
            background-color: #04af2f;
            color: white;
        }
    </style>
</head>
<body>
    <p>Click to add box shadow</p>
    <button onclick="fun()">Add</button>
    <div id="shadow">
        <p>Welcome to Tutorials point</p>
    </div>
    <script>
        function fun() {
            document.getElementById("shadow")
                .style.boxShadow = "10px 20px 40px 30px aqua";
        }
    </script>
</body>
</html>

Add 'inset' to Box Shadow

The following example adds inset to box shadow.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object boxShadow Property
    </title>
    <style>
        #shadow {
            position: absolute;
            width: fit-content;
            background-color: #04af2f;
            color: white;
        }
    </style>
</head>
<body>
    <p>Click to add box shadow</p>
    <button onclick="fun()">Add</button>
    <div id="shadow">
        <p>Welcome to Tutorials point</p>
    </div>
    <script>
        function fun() {
            document.getElementById("shadow")
                .style.boxShadow = "10px 20px aqua inset";
        }
    </script>
</body>
</html>

Supported Browsers

Property
boxShadow	Yes 10	Yes 12	Yes 4	Yes 5.1	Yes 10.5

html_dom.htm

Print Page