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.
Requirement – This widget is a part of The Plus Addons for Elementor Pro, make sure it’s installed & activated to enjoy all its powers.
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.
- 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.
Choose the Blend Mode
Go to the Style tab and open Follow Circle. Mix Blend Mode sits at the top and starts on difference.
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.
| 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:
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.
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.
