Computer >> Computer tutorials >  >> Programming >> Javascript

How to attach one or more drop-shadows to the box with JavaScript?


To attach drop-shadows to the box, use the boxShadow property in JavaScript. With this property, add the width of the shadow as well as color.

Example

You can try to run the following code to learn how to attach one or more drop-shadows.

<!DOCTYPE html>
<html>
   <head>
      <style>
         #box {
            border: thick solid green;
            width: 300px;
            height: 200px
         }
      </style>
   </head>
   <body>
      <div id="box">Demo Text</div>
      <br><br>
      <button type="button" onclick="display()">Add drop shadow</button>
      <script>
         function display() {
            document.getElementById("box").style.boxShadow = "20px 15px 25px orange";
         }
      </script>
   </body>
</html>