Skip to content
Related Articles

Related Articles

Improve Article

HTML | DOM Style boxShadow Property

  • Difficulty Level : Basic
  • Last Updated : 31 Jul, 2019
Geek Week

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"

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:




    <!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:




    <!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:




    <!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:




    <!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:




    <!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:




    <!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:




    <!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:




    <!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
    • Internet Explorer 9.0
    • Firefox
    • Opera
    • Apple Safari 5.1.1

    Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.




    My Personal Notes arrow_drop_up
Recommended Articles
Page :