HTML | DOM Style boxShadow Property

The DOM Style boxShadow property is used to set or return the drop-shadow of an element.

Syntax:

To get the boxShadow Property

object.style.boxShadow

To set the boxShadow Property

object.style.boxShadow = "horizontal-offset vertical-offset blur
spread color inset | none | initial | inherit"

Return Values: It returns a string value, which representing the box-shadow property of an element.

Property Values:

1. horizontal-offset vertical-offset: This is used to specify the position of the shadow in length units. Negative values are allowed.

Example-1:

html

<!DOCTYPE html>
<html lang="en">

<head>
    <title>
        DOM Style boxShadow
    </title>

    <style>
        .elem {
            border-style: solid;
            margin: 10px;
            padding: 10px;
        }
    </style>
</head>

<body>
    <h1 style="color: green">
      GeeksforGeeks
    </h1>
    <b>
      DOM Style boxShadow
    </b>
    <p class="elem">
      GeeksforGeeks is a computer science portal
      with a huge variety of well written and 
      explained computer science and programming
      articles, quizzes and interview questions.
    </p>
    <button onclick="setShadow()" 
            style="margin-top: 20px;">
        Change boxShadow
    </button>

    <!-- Script to change boxShadow -->
    <script>
        function setShadow() {
            elem = document.querySelector('.elem');
            elem.style.boxShadow = '10px 20px';
        }
    </script>
</body>

</html>

Output:

Before clicking the button:

offsets-before

After clicking the button:

offsets-after

2. blur: This is used to define the amount of blur to be used in the shadow.

Example-2:

html

<!DOCTYPE html>
<html lang="en">

<head>
    <title>
        DOM Style boxShadow
    </title>

    <style>
        .elem {
            border-style: solid;
            margin: 10px;
            padding: 10px;
        }
    </style>
</head>

<body>
    <h1 style="color: green">
      GeeksforGeeks
    </h1>
    <b>
      DOM Style boxShadow
    </b>
    <p class="elem">
      GeeksforGeeks is a computer science
      portal with a huge variety of well 
      written and explained computer science
      and programming articles, quizzes and
      interview questions.
    </p>
    <button onclick="setShadow()" 
            style="margin-top: 20px;">
        Change boxShadow
    </button>

    <!-- Script to change boxShadow -->
    <script>
        function setShadow() {
            elem = document.querySelector('.elem');
            elem.style.boxShadow = '10px 20px 5px';
        }
    </script>
</body>

</html>

Output:

Before clicking the button:

blur-before

After clicking the button:

blur-after

3. spread: This is used to define the amount of spread of the shadow.

Example-3:

html

<!DOCTYPE html>
<html lang="en">

<head>
    <title>
        DOM Style boxShadow
    </title>

    <style>
        .elem {
            border-style: solid;
            margin: 30px;
            padding: 10px;
        }
    </style>
</head>

<body>
    <h1 style="color: green">
      GeeksforGeeks
    </h1>
    <b>
      DOM Style boxShadow
    </b>
    <p class="elem">
      GeeksforGeeks is a computer science 
      portal with a huge variety of well 
      written and explained computer science 
      and programming articles, quizzes and
      interview questions.
    </p>
    <button onclick="setShadow()" 
            style="margin-top: 20px;">
        Change boxShadow
    </button>

    <!-- Script to change boxShadow -->
    <script>
        function setShadow() {
            elem = document.querySelector('.elem');
            elem.style.boxShadow = '10px 20px 0px 20px';
        }
    </script>
</body>

</html>

Output:

Before clicking the button:

spread-before

After clicking the button:

spread-after

4. color: This is used to define the color of the shadow to be used.

Example-4:

html

<!DOCTYPE html>
<html lang="en">

<head>
    <title>
        DOM Style boxShadow
    </title>

    <style>
        .elem {
            border-style: solid;
            margin: 25px;
            padding: 10px;
        }
    </style>
</head>

<body>
    <h1 style="color: green">
      GeeksforGeeks
    </h1>
    <b>
      DOM Style boxShadow
    </b>
    <p class="elem">
      GeeksforGeeks is a computer science 
      portal with a huge variety of well 
      written and explained computer science 
      and programming articles, quizzes and 
      interview questions.
    </p>
    <button onclick="setShadow()" 
            style="margin-top: 20px;">
        Change boxShadow
    </button>

    <!-- Script to change boxShadow -->
    <script>
        function setShadow() {
            elem = document.querySelector('.elem');
            elem.style.boxShadow = '10px 20px green';
        }
    </script>
</body>

</html>

Output:

Before clicking the button:

color-before

After clicking the button:

color-after

5. inset: This is used to set the shadow to an inner one. Normally a shadow is an outset, that is outside.

Example-5:

html

<!DOCTYPE html>
<html lang="en">

<head>
    <title>
        DOM Style boxShadow
    </title>

    <style>
        .elem {
            border-style: solid;
            margin: 25px;
            padding: 10px;
            box-shadow: 10px 20px;
        }
    </style>
</head>

<body>
    <h1 style="color: green">
      GeeksforGeeks
    </h1>
    <b>
      DOM Style boxShadow
    </b>
    <p class="elem">
      GeeksforGeeks is a computer science 
      portal with a huge variety of well 
      written and explained computer science 
      and programming articles, quizzes and 
      interview questions.
    </p>
    <button onclick="setShadow()" 
            style="margin-top: 20px;">
        Change boxShadow
    </button>

    <!-- Script to change boxShadow -->
    <script>
        function setShadow() {
            elem = document.querySelector('.elem');
            elem.style.boxShadow = '10px 20px inset';
        }
    </script>
</body>

</html>

Output:

Before clicking the button:

inset-before

After clicking the button:

inset-after

6. none: This is used to remove any shadow present. This is the default value.

Example-6:

html

<!DOCTYPE html>
<html lang="en">

<head>
    <title>
        DOM Style boxShadow
    </title>

    <style>
        .elem {
            border-style: solid;
            margin: 10px;
            padding: 10px;
            box-shadow: 10px 20px;
        }
    </style>
</head>

<body>
    <h1 style="color: green">
      GeeksforGeeks
    </h1>
    <b>
      DOM Style boxShadow
    </b>
    <p class="elem">
      GeeksforGeeks is a computer science
      portal with a huge variety of well 
      written and explained computer science 
      and programming articles, quizzes and 
      interview questions.
    </p>
    <button onclick="setShadow()" 
            style="margin-top: 20px;">
        Change boxShadow
    </button>

    <!-- Script to change boxShadow -->
    <script>
        function setShadow() {
            elem = document.querySelector('.elem');
            elem.style.boxShadow = 'none';
        }
    </script>
</body>

</html>

Output:

Before clicking the button:

none-before

After clicking the button:

none-after

7. initial: This is used to set this property to its default value.

Example-7:

html

<!DOCTYPE html>
<html lang="en">

<head>
    <title>
        DOM Style boxShadow
    </title>

    <style>
        .elem {
            border-style: solid;
            padding: 10px;
            margin: 25px;
            box-shadow: 10px 20px green;
        }
    </style>
</head>

<body>
    <h1 style="color: green">
      GeeksforGeeks
    </h1>
    <b>
      DOM Style boxShadow
    </b>
    <p class="elem">
      GeeksforGeeks is a computer science 
      portal with a huge variety of well
      written and explained computer science
      and programming articles, quizzes and
      interview questions.
    </p>
    <button onclick="setShadow()"
            style="margin-top: 20px;">
        Change boxShadow
    </button>

    <!-- Script to change boxShadow -->
    <script>
        function setShadow() {
            elem = document.querySelector('.elem');
            elem.style.boxShadow = 'initial';
        }
    </script>
</body>

</html>

Output:

Before clicking the button:

initial-before

After clicking the button:

initial-after

8. inherit: This inherits the property from its parent.

Example-8:

html

<!DOCTYPE html>
<html lang="en">

<head>
    <title>
        DOM Style boxShadow
    </title>

    <style>
        #parent {
            border-style: solid;
            padding: 10px;
            margin: 25px;
            box-shadow: 5px 10px green;
        }
        
        .elem {
            border-style: solid;
            padding: 10px;
        }
    </style>
</head>

<body>
    <h1 style="color: green">
      GeeksforGeeks
    </h1>
    <b>
      DOM Style boxShadow
    </b>
    <br>
    <br>
    <div id="parent">
        <p class="elem">
          GeeksforGeeks is a computer science
          portal with a huge variety of well 
          written and explained computer science
          and programming articles, quizzes and
          interview questions.
        </p>
    </div>
    <br>
    <button onclick="setShadow()" style="margin-top: 20px;">
        Change boxShadow
    </button>

    <!-- Script to change boxShadow -->
    <script>
        function setShadow() {
            elem = document.querySelector('.elem');
            elem.style.boxShadow = 'inherit';
        }
    </script>
</body>

</html>

Output:

Before clicking the button:

inherit-before

After clicking the button:

inherit-after

Supported Browsers: The browser supported by boxShadow property are listed below:

Google Chrome 10 and above
Edge 12 and above
Internet Explorer 9.0 and above
Firefox 4 and above
Opera 10.5 and above
Apple Safari 5.1 and above

HTML | DOM Style boxShadow Property

Explore