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"

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:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    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:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    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:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    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:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    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:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    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:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    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:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    Output:

    Before clicking the button:

    initial-before


    After clicking the button:

    initial-after

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

    Example-8:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    Output:

    Before clicking the button:

    inherit-before

    After clicking the button:

    inherit-after

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

    • Google Chrome
    • Internet Explorer 9.0
    • Firefox
    • Opera
    • Apple Safari 5.1.1


    My Personal Notes arrow_drop_up

    Technical Writer Lets have an update

    If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

    Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




    Article Tags :
    Practice Tags :


    Be the First to upvote.


    Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.