---
title: "How to Add a Blend Cursor in Elementor?"
url: https://theplusaddons.com/docs/add-a-blend-cursor-in-elementor/
date: 2025-01-11
modified: 2026-09-14
lang: en
author: "Aditya Sharma"
description: "A blend cursor is a circle that does not sit on your content so much as react to it — inverting a photo, tinting a heading, lightening a dark panel..."
image: https://theplusaddons.com/wp-content/uploads/2025/01/How-to-Add-a-Blend-Cursor-in-Elementor_-1024x536.jpg
word_count: 822
---

# How to Add a Blend Cursor in Elementor?

## 

- Mouse Cursor is only in The Plus Addons for Elementor Pro, and the widget works only at frontend, not in the Elementor editor.
- Blend Cursor is one of the three Follow Circle styles in the Mouse Cursor widget, and it uses a CSS blend mode such as difference, exclusion, multiply, or screen.
- Circle Max Width and Circle Max Height stay equal to keep the circle round, and 120 to 150px reads well for a blend cursor.
- Every Mouse Cursor effect switches off below 992px of window width, so nothing happens on phones and most tablets.

A blend cursor is a circle that does not sit *on* your content so much as react to it — inverting a photo, tinting a heading, lightening a dark panel as it passes over.

It is one of the three **Follow Circle** styles in the **Mouse Cursor** widget, and the effect comes from a CSS blend mode.

*To check the complete feature overview documentation of The Plus Addons for Elementor Mouse Cursor widget, [click here](https://theplusaddons.com/docs/add-a-custom-cursor-in-elementor/).*

***Requirement - This widget is a part of The Plus Addons for Elementor Pro, make sure it's installed & activated to enjoy all its powers.***

[LIVE WIDGET LINK](https://theplusaddons.com/elementor-widget/mouse-cursor/?utm_source=tpae&utm_medium=docs&utm_campaign=text)

## Before You Start

- **Edition:** **Pro** — Mouse Cursor is only in The Plus Addons for Elementor Pro. With the Pro plugin switched off the widget is not in the editor at all, and a page that already uses it shows no cursor effect and no notice.- **Widget to enable:** Mouse Cursor, switched on under **The Plus Addons > Widgets**.- **Where to drop it:** anywhere inside the container whose cursor you want to change. The widget itself is invisible, so its position on the page does not matter — only which container it sits in.- **Check it on the published page:** the widget draws nothing in the Elementor editor. The panel says so too: *This widget works only at frontend*.- **Desktop only:** every cursor effect is switched off when the browser window is **991px wide or narrower**, so nothing happens on phones and most tablets.

## Add a Blend Cursor

- Drag the **Mouse Cursor** widget into the container you want the effect in.- Set **Cursor Area** — **Body** for the whole page, **Container** for one band of it.- In **Type**, click the **Follow Circle** picture.- Leave **Pointer Type** on **Predefined** and choose the pointer the visitor sees underneath in **Select Pointer**.- Set **Follow Circle Style** to **Blend Cursor**.

![Follow Circle Style set to Blend Cursor in the Mouse Cursor widget](https://theplusaddons.com/wp-content/uploads/2026/09/mousecursor-blend-style.webp)

- Set **Circle Max Width** and **Circle Max Height** to the same number so it stays round. A blend cursor usually wants to be larger than a plain one — 120 to 150px reads well.- Raise **Circle Z-Index** from its default of 1, or the circle will hide behind your content.

![Circle Max Width and Circle Max Height sliders in the Mouse Cursor widget](https://theplusaddons.com/wp-content/uploads/2026/09/mousecursor-circle-size.webp)

## Choose the Blend Mode

Go to the **Style** tab and open **Follow Circle**. **Mix Blend Mode** sits at the top and starts on *difference*.

![Mix Blend Mode dropdown at the top of the Follow Circle style section](https://theplusaddons.com/wp-content/uploads/2026/09/mousecursor-blend-mode.webp)

Then set **Background Color** on the **Normal** tab — the blend mode has nothing to work with until the circle has a colour. White with *difference* gives the classic inverted-photo look.

![Background Color field on the Normal tab of the Follow Circle style section](https://theplusaddons.com/wp-content/uploads/2026/09/mousecursor-circle-normal.webp)

| Blend mode | What it tends to do |
| ---------- | ------------------- |
| *difference* | Inverts what is behind the circle. The default, and the strongest. |
| *exclusion* | Like *difference* but softer in the mid-tones. |
| *multiply* | Darkens. Good over light photography. |
| *screen* | Lightens. Good over a dark section. |
| *overlay*, *hard-light*, *soft-light* | Boost contrast by different amounts. |
| *hue*, *saturation*, *color*, *luminosity* | Keep the content and change only that one channel. |

With *difference* and a white circle over a photograph, the circle measured `mix-blend-mode: difference` and inverted the picture underneath:

![Web page where a blend cursor circle inverts the colours of the photograph behind it](https://theplusaddons.com/wp-content/uploads/2026/09/mousecursor-result-blend.webp)

![Recording of a blend cursor inverting the content it passes over](https://theplusaddons.com/wp-content/uploads/2025/01/mouse-cursor-blend-cursor-demo.gif)

## Normal and Hover

The **Normal** and **Hover** tabs both offer **Background Color**, **Transform CSS** and **Transition Duration**. **List of Tags for Hover Effect** back in the **Content** section decides which elements count as a hover — it takes a CSS selector and starts as `a`.

![List of Tags for Hover Effect field in the Mouse Cursor widget set to a, img](https://theplusaddons.com/wp-content/uploads/2026/09/mousecursor-tag-list.webp)

![Recording of the Mouse Cursor panel with Blend Cursor selected and a blend mode chosen](https://theplusaddons.com/wp-content/uploads/2025/01/mouse-cursor-blend-cursor.gif)

## How It Behaves

- The blend happens in the browser against whatever is actually painted behind the circle, so the same setting looks different over a photo, a flat colour and a gradient.- The circle is hidden until the pointer first enters the area.- **Select Pointer** changes the ordinary pointer under the circle, not the circle.- The effect is switched off entirely below 992px of window width.

## Limitations

- The widget is Pro only. With the Pro plugin switched off there is no cursor and no notice.- Nothing happens at **991px** of window width or below.- **Circle Z-Index** starts at 1, so the blend circle is hidden behind most positioned content until you raise it.- A blend mode needs something behind it. Over a plain white page with a white circle and *difference*, nothing appears to happen.- The circle is not click-through with **Pointer Type** set to **Predefined**. That makes **Transform CSS** on the **Hover** tab unreliable — in repeated tests the hover transform sometimes stayed applied away from a matching element and sometimes did not apply over one. Use it for decoration, not as a signal.- An invalid CSS selector in **List of Tags for Hover Effect** stops the whole cursor from working, with no message.

## Troubleshooting

### I cannot see any blending

Give the circle a **Background Color** on the **Normal** tab. Without one there is nothing to blend. Then check there is real content behind it — a photo or a coloured panel, not plain white.

### The circle keeps disappearing

Raise **Circle Z-Index**.

### It looks washed out rather than inverted

Try *difference* with a white circle. *exclusion* and the light modes are deliberately gentler.

### Nothing happens on a phone

That is by design. Every Mouse Cursor effect stops below 992px of window width.

## Related Docs

- [Mouse Cursor widget settings overview](https://theplusaddons.com/docs/add-a-custom-cursor-in-elementor/)- [Add a follow circle cursor](https://theplusaddons.com/docs/add-a-follow-circle-cursor-in-elementor/)- [Add a progress cursor](https://theplusaddons.com/docs/add-a-progress-cursor-in-elementor/)- [Change the mouse cursor for a container](https://theplusaddons.com/docs/change-the-mouse-cursor-for-a-container-in-elementor/)