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.

Live Demo

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

Fendadis John

Published on 26-Feb-2018 11:19:48

Previous Page Print Page Next Page