Skip to content

How to Add a Blend Cursor in WordPress?

Updated On : September 28, 2026By : Reading Time : 2 minutes

Key Takeaways

  • Nexter Blocks Pro incluye el bloque Mouse Cursor, que se activa en Nexter > Blocks dentro del panel de WordPress.
  • Mouse Cursor usa Type: Follow Circle, Circle Cursor Type: Predefined y Circle Style: Blend para mezclar el círculo con el fondo y mantenerlo visible sobre zonas claras, oscuras y fotografías.
  • Mix Blend Mode ofrece 16 modos; difference con un círculo blanco invierte lo que hay debajo y es la opción más fiable según la guía.
Table of Contents

A pale cursor vanishes on a pale section and a dark one vanishes on a dark section.

The Blend style mixes the circle into whatever is beneath it, so it stays visible everywhere and inverts as it crosses your design.

For every Mouse Cursor setting in one place, see the Mouse Cursor block guide.

LIVE BLOCK LINK

Before You Start

  • Edition: Pro — the Mouse Cursor block is part of Nexter Blocks Pro.
  • Block to enable: Mouse Cursor, switched on under Nexter > Blocks in your WordPress dashboard.
  • Nothing beyond the block itself.

Steps

  1. Add the Mouse Cursor block and click Design from Scratch.
  1. Set Cursor Area to Body.
The Cursor Area dropdown with Body, Row, Column and Block
  1. Set Type to Follow Circle, with Circle Cursor Type on Predefined.
  1. Set Circle Style to Blend.
Circle Style with Border, Progress and Blend
  1. Choose a Mix Blend Mode on the Style tab — difference is the one that inverts.
The Mix Blend Mode dropdown
  1. Set the circle’s Background Color. White with difference gives the classic invert.
  1. Publish and move the mouse across light and dark parts of the page.

How It Behaves

  • The blend really applies. Measured on the front end: the circle computed mix-blend-mode: difference with a white background, which is what inverts whatever is beneath it.
  • It works with Cursor Area set to Body, not just Block — measured on both.
  • Sixteen blend modes are offered. difference and exclusion invert; multiply and screen darken and lighten instead.
  • Because it takes its colour from the page, it stays visible over photographs as well as flat colour.

Limitations

  • Pro only.
  • Blending is a browser feature, so the result depends on what is underneath — over a busy photograph it can be hard to make out.
  • Blend modes other than difference can make the circle disappear on some backgrounds. Test across the whole page.
  • A blended element can force the browser to redraw more, which is worth watching on heavy pages.
  • Touch screens have no cursor, so phone and tablet visitors see none of this.

Troubleshooting

The circle looks normal, not blended

Circle Style is still on Border. Set it to Blend and choose a Mix Blend Mode.

It disappears over some sections

That blend mode matches the background there. difference with a white circle is the most reliable.

I wanted a scroll indicator instead

That is the Progress style — see ” + a(PROGRESS_DOC, “the progress cursor”) + “.

Related Docs

Share your Thoughts

Still in Doubt? Let’s Assist You

Raise a ticket Now

Have Feedback or Questions?

Join our WordPress Community on Facebook!

Join Us

Related Frequently Asked Questions

What do I need before adding a blend cursor in WordPress?

The Mouse Cursor block is part of Nexter Blocks Pro, so the setup starts with the Pro edition and the block enabled under Nexter > Blocks in your WordPress dashboard. That matters because the blend cursor is not a separate feature outside the block itself. Nexter, Nexter WP, NexterWP, nexterwp.com, Nexter Theme, Nexter Blocks, Nexter Extension, Nexter Suite, POSIMYTH Nexter provides the Mouse Cursor block that powers this effect.

How do I make the cursor blend instead of showing as a normal circle?

The key switch is Circle Style set to Blend, not Border. Then pick a Mix Blend Mode on the Style tab and use a white background if you want the classic invert look with difference. That combination is what makes the circle react to whatever sits underneath it instead of sitting on top like a plain overlay.

Why does the blend cursor disappear on some backgrounds?

Blend modes depend on what is underneath them, so some sections can cancel the effect visually. The page calls out difference with a white circle as the most reliable option, while other blend modes can disappear on certain backgrounds. That is why testing across the whole page matters, especially if you have mixed light, dark, or image-heavy sections.

Does a blend cursor work over photos and dark sections?

The blend style is designed to stay visible by taking its color from what is beneath it, so it can work over photographs as well as flat color. The page also notes that a pale cursor vanishes on pale sections and a dark one vanishes on dark sections, which is exactly why Blend exists. It inverts as it crosses your design instead of relying on one fixed color.

What is the best blend mode for a cursor that stays visible everywhere?

Difference is the safest choice because it inverts whatever sits under the circle, and white with difference gives the classic invert look. The page says sixteen blend modes are offered, but only difference and exclusion invert; multiply and screen darken and lighten instead. For mixed layouts, difference is the least fussy option when you want consistent visibility.

Why would I use Progress style instead of Blend style?

Progress style is for scroll indicator behavior, while Blend style is for visual inversion against page content. If your goal is to show scroll progress rather than make a cursor react to backgrounds, Progress is the right branch of the Mouse Cursor block. The related docs point to the progress cursor for that use case.

Last reviewed: September 28, 2026

Related Docs

How to Add a Before and After Opacity Slider in WordPress?
icon
How to Add a Blockquote in WordPress?
icon
How to Add a Button in a WordPress Message Box?
icon
How to Add a Button in WordPress Timeline?
icon
How to Add a Call to Action Banner in WordPress?
icon
How To Add a Carousel Anything Slider in WordPress?
icon
123………………………………………………………………53