JavaScript Code

How to change shadow of a div using JavaScript?

Tutorials using JS

Change shadow of a div using JavaScript

In this tutorial, you shall learn how to change the box shadow of a div element using JavaScript.


To set or change the box shadow of a div element using JavaScript, we can use property. Get the div element and set its style.boxShadow property with the required box-shadow value. = '2px 2px 10px 5px blue';


When user clicks on the Click me button, we get the div element with the id myDiv and set its box shadow to 2px 2px 10px 5px blue using style.boxShadow property.

<!DOCTYPE html>
<h1>JavaScript Tutorial</h1>
<button id="myBtn">Click me</button>
<div id="myDiv">About</div>

#myDiv {
  width: 100px;
  height: 100px;
  background: yellow;

document.getElementById("myBtn").addEventListener("click", function() {
    //get the div element
    const myDiv = document.getElementById("myDiv");
    //set the shadow of the div = '2px 2px 10px 5px blue';


Copyright @2022