Creating a Dynamic Radial Gradient Background that Follows the Mouse

by | May 22, 2024 | Code, Inspiration, Projects

In modern web design, creating visually engaging and interactive backgrounds can significantly enhance user experience. One compelling effect is a radial gradient that follows mouse movements, creating a dynamic and colourful backdrop. In this article, we’ll guide you through the process of implementing this effect using HTML, CSS, and JavaScript.

Example:

Setting Up the Project

To begin, create a project folder named RadialGradientBackground. Inside this folder, create three files: index.html, styles.css, and script.js.

HTML Structure

The HTML file provides the basic structure of the webpage. Here, we’ll create a div that will contain the gradient background.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Radial Gradient Background Follow Mouse</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="gradient-background"></div>
    <script src="script.js"></script>
</body>
</html>

CSS Styling

Next, we style the div to ensure it covers the entire screen. The CSS also includes a transition effect for smooth background changes.

body, html {
    margin: 0;
    padding: 0;
    overflow: hidden;
    height: 100%;
    width: 100%;
}

#gradient-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: background 0.1s;
}

JavaScript for Dynamic Interaction

The JavaScript file adds the interactive element by updating the gradient’s center position based on the mouse movement.

document.addEventListener('mousemove', function(event) {
    let x = event.clientX / window.innerWidth;
    let y = event.clientY / window.innerHeight;

    let radialGradient = `radial-gradient(circle at ${x * 100}% ${y * 100}%, red, orange, yellow, green, blue)`;
    document.getElementById('gradient-background').style.background = radialGradient;
});

How It Works

  1. HTML: The index.html file contains a div with an ID of gradient-background. This div will be used to apply the gradient background that changes based on mouse movements.
  2. CSS: In styles.css, the body and html are styled to occupy the full viewport without any overflow. The div with the ID gradient-background is set to cover the entire screen with a smooth transition effect for background changes.
  3. JavaScript: The script.js file contains an event listener for mouse movements. When the mouse moves, it calculates the position of the mouse as a percentage of the window’s width and height. These percentages are used to set the position of the radial gradient’s centre using circle at x% y%. The gradient colours transition smoothly, filling the entire screen width from the centre to the edges.

Running the Project

To see the effect in action, follow these steps:

  1. Create the Project Folder: Create a new folder named RadialGradientBackground.
  2. Create HTML, CSS, and JavaScript Files: Inside RadialGradientBackground, create index.html, styles.css, and script.js.
  3. Add Code to the Files: Copy and paste the respective code snippets provided above into each file.
  4. Open the HTML File in a Browser: Navigate to the RadialGradientBackground folder. Double-click index.html to open it in your web browser, or right-click and select “Open with” to choose a specific browser.

Now, as you move your mouse around the screen, the radial gradient will dynamically update its centre position, creating a visually appealing effect that follows the cursor. This simple yet powerful interaction can significantly enhance the aesthetic appeal of your web projects, making them more engaging and interactive for users.