Creating Custom Monochromatic Cursor Effect in Divi

Updated for Divi 5: I tested this effect on a Divi 5 page and it works just like in Divi 4. The updated CSS below also keeps buttons under the circle clickable, hides the circle on touch screens, and the steps show where to add the CSS class in Divi 5.

Fun follow-the-mouse effect with CSS blend modes!

A big white circle follows the mouse over a black-and-white section, and thanks to the CSS mix-blend-mode: difference property everything under it flips colors: black turns white and white turns black.

In this short tutorial, I am going to show you how to recreate the custom cursor effect we included in the Black Friday Landing Page layout.

We are going to use the CSS mix-blend-mode property and some jQuery code to make it happen. Watch the step-by-step walkthrough video and copy the code we used below!

The video was recorded in Divi 4. The code is the same in Divi 5, only the place where you add the CSS class has moved (see the first step below).

Want to see it live first? Move your mouse over the live preview of the Black Friday landing page. You can also download the whole layout for free:

First, the Divi Builder structure

You need one section with two columns in contrasting colors (one black, one white) and a custom CSS class on the section, so the jQuery code knows where to add the circle.

This is a simple two-column layout with bold typography. Using two different column colors allows for a surprising hover, follow-the-mouse experience. The content of each column can change, but it’s best to keep it in black/white colors only.

In our example, the parent section uses a custom CSS class of dl-bf-hero. To add it, open the Section settings and go to Advanced ➜ Attributes ➜ Add Attribute ➜ CSS Class (in Divi 4: Advanced ➜ CSS ID & Classes ➜ CSS Class).

Next, the jQuery element

A short jQuery function adds an empty div with the class cursor inside the section. That div becomes the circle.

To make sure that the CSS mix-blend-mode property works across both columns, our cursor element needs to be a sibling of a parent row. The jQuery function below appends the new div with a CSS class of cursor inside the section (right after our row).

jQuery(document).ready(function($){
    $('.dl-bf-hero').append('<div class="cursor"></div>');
});

You can add the code to a Code module on the same page (wrapped in <script> and </script> tags) or to Divi ➜ Theme Options ➜ Integration ➜ Add code to the < body >. Divi 5 loads jQuery at the end of the page by default, but code wrapped in jQuery(document).ready() still runs at the right moment. More about this in my guide on adding JavaScript and jQuery code to Divi.

Styling the element!

The CSS turns the empty div into a 400px white circle, fixes it to the screen and blends it with the section using mix-blend-mode: difference. Here is the CSS code we used to style the new element:

.cursor {
    position: fixed;
    top: 0;
    left: 50%;
    width: 400px;
    height: 400px;
    background: #fff;
    border-radius: 50%;
    z-index: 2;
    pointer-events: none;
    mix-blend-mode: difference;
    transform: translate(-50%, -50%);
}

/* Optional: hide the regular mouse pointer over the section */
.dl-bf-hero {
    cursor: none;
}

/* No mouse on touch screens, so no circle */
@media (hover: none) {
    .cursor {
        display: none;
    }
}

Add it to Divi ➜ Theme Options ➜ General ➜ Custom CSS, to the page’s Custom CSS (in Divi 5: the gear icon in the top-left corner ➜ Page Settings ➜ Advanced ➜ Custom CSS) or to the same Code module, wrapped in <style> tags.

Three lines are new compared to the first version of this post:

• pointer-events: none; lets clicks pass through the circle, so buttons and links under it keep working. Our layout always had it, this post was missing it.
• cursor: none; hides the regular arrow over the section, so the circle is the cursor. It’s optional: if your section has buttons, you may prefer to keep the arrow visible.
• The @media (hover: none) rule hides the circle on phones and tablets. They have no mouse, so without it the circle just sits half-visible at the top of the screen.

Finally, move it with the cursor position!

A mousemove listener on the window copies the mouse position (e.clientX and e.clientY) into the circle’s left and top values every time the mouse moves.

This bit of jQuery will make sure that the element top and left position are updated automatically when the user cursor position changes within the browser window.

$(window).on('mousemove', function(e){
    $('.cursor').css({
        top: e.clientY,
        left: e.clientX
    });
});

And the final jQuery code looks like this:

<script>
jQuery(document).ready(function($){
    $('.dl-bf-hero').append('<div class="cursor"></div>');
    $(window).on('mousemove', function(e){
        $('.cursor').css({
            top: e.clientY,
            left: e.clientX
        });
    });
});
</script>

The original version used the .mousemove() shortcut. It still works, but jQuery has marked these event shortcuts as deprecated, so I switched to .on('mousemove'), which does exactly the same.

Here's the final effect!

When you move the mouse over the hero section, the circle follows it, and the text inside the circle switches from white to black on the black column and from black to white on the white column.

How to customize the cursor effect

You can change where the circle shows up, its size and its color with a few small CSS edits. Here are the ones I find most useful.

Show the circle only over the section

The circle is fixed to the screen, so it keeps following the mouse when you scroll past the section. To show it only while the mouse is over the section, add this CSS:

.cursor {
    transition: opacity .3s;
}
.dl-bf-hero:not(:hover) .cursor {
    opacity: 0;
}

The circle lives inside the section, so it fades out as soon as the mouse leaves the section and fades back in when it returns.

Change the size and color

Change width and height (keep them equal) for a smaller or bigger circle. You can also try a different background color: with the difference blend mode, the circle shows its own color over black and the opposite color over white, which gives fun two-color combinations.

A native Divi 5 alternative for subtle movement

Divi 5 has an Interaction that moves an element with the mouse: Advanced ➜ Interactions ➜ Add Interaction, with the Mouse Enter trigger and the Mirror Mouse Movement effect (move, scale, tilt, rotate or fade). It moves the element relative to where the mouse entered and resets it when the mouse leaves, so it’s great for playful parallax-style movement. For a circle that sits exactly under the cursor, keep the small jQuery script from this post.

What do you think?

This effect works best on bold, high-contrast designs, and it’s a fun way to make a landing page feel interactive. If you like playful cursor effects, check out my floating hearts cursor effect for Divi too.

I would love to see how you use this effect! Share your creative ideas in my Divi Lovers Facebook group.