Open In App

HTML | DOM Style boxShadow Property

Improve
Improve
Like Article
Like
Save
Share
Report

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


Last Updated : 08 Aug, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads