How to Change Background Color According to Mouse Location using JavaScript? Last Updated : 12 Nov, 2024 Comments Improve Suggest changes Like Article Like Report To change the background color based on the mouse location in JavaScript, we can track the cursor's position on the screen and adjust the background color as the mouse moves. This is done by capturing the X and Y coordinates of the mouse and applying those values to change the background color dynamically.HTML: We start with a simple HTML structure, including a div that will act as the canvas for changing the background color based on the cursor's position.CSS: Basic CSS is applied to give the div full width and height, ensuring it covers the entire page.JavaScript: We track the mouse's movement using the mousemove event. By capturing the X and Y coordinates, we dynamically update the background color based on the cursor's position. HTML <div class="geeks"></div> CSS .geeks { width: 100%; height: 600px; background-size: cover; } JavaScript let div = document.querySelector(".geeks"); div.addEventListener("mousemove", function (e) { x = e.offsetX; y = e.offsetY; div.style.backgroundColor = `rgb(${x}, ${y}, ${x - y})`; }); Output Comment More infoAdvertise with us Next Article How to Change Background Color According to Mouse Location using JavaScript? S sirohimukul1999 Follow Improve Article Tags : JavaScript Web Technologies HTML CSS CSS-Misc HTML-Misc JavaScript-Misc +3 More Similar Reads How to Change Background Color of a Div on Mouse Move Over using JavaScript ? The background color of the div box can be easily changed using HTML, CSS, and Javascript. We will use the querySelector() and addEventListener() methods to select the element and then apply some math logic to change its background color. The below sections will guide you on how to create the effect 2 min read How to change text color depending on background color using JavaScript? The task is to set the foreground color based on the background color so that it will become visible. Here few of the important techniques are discussed. We are going to use JavaScript. Approach: First, select the random Background color(by selecting random RGB values) or a specific one.Use the YIQ 3 min read How to Create a Change Background on Scroll using HTML CSS and JavaScript ? In this article, we will try to change the background color of the container once the scroll occurs. If a user scrolls down the page the background color will be changed. We will use the below approach to accomplish this task.Using the scroll event on the window objectIn this approach, we will use t 6 min read Design Background color changer using HTML CSS and JavaScript Background color changer is a project which enables to change the background color of web pages with ease. There are color boxes on a web page when the user clicks on any one of them, then the resultant color will appear in the background of the web page. It makes web pages look attractive.File stru 3 min read How to change the Background Color after Clicking the Button in JavaScript? Changing the background color after clicking a button in JavaScript involves attaching a click event listener to the button. When the button is clicked, it triggers a function that changes the background color of a specific element (like the page or a section of it).This creates a simple and interac 3 min read Like