Add a captivating, dynamic background to your DIVI text modules with this advanced CSS and JavaScript hack. This guide will show you how to create an interactive background that changes colors as the user moves their cursor across the module, enhancing user engagement and adding a unique visual element to your website.

/* CSS for the Text Module */

.dynamic-background {

    position: relative;

    overflow: hidden;


.dynamic-background::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    z-index: 0;


Next, add the following JavaScript snippet to your DIVI website (in the Theme Options under Integration or directly in a Code module):

document.addEventListener('mousemove', function(e) {

    var x = e.clientX / window.innerWidth * 100;

    var y = e.clientY / window.innerHeight * 100;

    document.querySelector('.dynamic-background::before').style.background = `linear-gradient(${x}deg, #color1, #color2)`;


Breaking Down the Code:

The CSS targets a DIVI text module class `.dynamic-background` and prepares it for a dynamic background effect using a pseudo-element. The JavaScript listens for mouse movements and changes the background gradient of the `.dynamic-background` element based on cursor position, creating an interactive and visually dynamic effect as users navigate around the module.

Implementation Steps:

1. Apply the `.dynamic-background` class to your text module via the module's advanced settings in DIVI.

2. Add the CSS code to the Custom CSS section under DIVI Theme Options or to your child theme's style.css file.

3. Insert the JavaScript code in the Theme Options under the Integration tab or into a Code module on the page where you want the effect to appear.

4. Customize the gradient colors (`#color1`, `#color2`) in the JavaScript snippet as desired.


Your text module now has an interactive background that changes based on the cursor's position on the screen, providing a unique, dynamic user experience on your DIVI site.