---
title: "How to Add a Blend Cursor in WordPress?"
url: https://nexterwp.com/docs/add-a-blend-cursor-in-wordpress/
date: 2024-12-16
modified: 2026-04-14
author: "Aditya Sharma"
description: "Do you want to add a blend cursor in WordPress? A blend circle cursor integrates with your content, creating a unique and creative effect that enhances the visual experience and..."
image: https://nexterwp.com/wp-content/uploads/2024/12/How-to-Add-a-Blend-Cursor-in-WordPress_-1024x519.jpg
word_count: 328
---

# How to Add a Blend Cursor in WordPress?

## Key Takeaways

- Nexter Blocks includes a Mouse Cursor block that allows users to add a blend cursor to their WordPress website.
- Users can manage the circle's dimensions and position using the Circle Max Width, Circle Max Height, Cursor Left Offset, and Cursor Top Offset sections.
- The blend cursor effect can be customized by selecting a blend mode from the Mix Blend Mode dropdown in the Style tab.

Do you want to add a blend cursor in WordPress? A blend circle cursor integrates with your content, creating a unique and creative effect that enhances the visual experience and interactivity on your website.

With the Mouse Cursor block from Nexter Blocks, you can easily add a blend cursor to your WordPress website.

*To check the complete feature overview documentation of the Nexter Blocks Mouse Cursor block,* *[click here](https://nexterwp.com/docs/add-a-custom-cursor-in-wordpress/).*

***Requirement  - This block is a part of the Nexter Blocks, make sure it's installed & activated to enjoy all its powers.***

[LIVE BLOCK LINK](https://nexterwp.com/nexter-blocks/blocks/wordpress-custom-cursors/)

To do this, add the Mouse Cursor block to the page and follow the steps -

1. Select the appropriate cursor area from the **Cursor Area** dropdown.

2. Then select **Follow Circle** from the **Type** dropdown.

3. From the Circle Cursor Type section, select **Predefined**. 

4. Then, from the **Select **dropdown, you have to select a cursor icon.

5. After that, select **Blend Cursor **from the **Circle Style** section.

From the **Circle Max Width** and **Circle Max Height** sections, you can manage the width and height of the circle.

You can manage the circle’s left and top distance from the mouse cursor from the **Cursor Left Offset** and **Cursor Top Offset** sections.

From the **Circle Z-Index** section, you can maintain the z-index of the circle, if the circle doesn’t show over any element.

Then, in the **List of Tags for Hover Effect** section, you can add tags where you want to show the cursor hover effect.

> *Note: You can add multiple tags separated by a comma (,) and you have to add transform CSS for the hover effect in the Style tab.*

6. Then go to the **Style** tab, from the **Mix Blend Mode** dropdown, you have to select a blend mode.

From the Normal and Hover tabs, you can style the cursor circle for normal and hover states.

Based on the selected blend mode, you’ll see the circle cursor blending with your content.

## Frequently Asked Questions

**Q: What should I do if the blend cursor isn't showing up on my WordPress site?**
A: If the blend cursor isn't appearing, check the Circle Z-Index setting. If the z-index is too low, the cursor may be hidden behind other elements. Adjust the z-index to a higher value to ensure the cursor displays correctly over your content.

**Q: What are the best settings for a blend cursor in a WordPress design?**
A: For optimal results with a blend cursor, consider using a Circle Max Width and Height that complements your design without overwhelming it. Additionally, experiment with different Mix Blend Mode options to find the one that best enhances your site's visual appeal.

**Q: Does the blend cursor work with other page builders besides Gutenberg?**
A: The blend cursor feature is part of the Mouse Cursor block from Nexter Blocks, which is designed primarily for Gutenberg. While it supports Elementor and Bricks, the blend cursor functionality is best utilized within the Gutenberg environment.