Cart

Home / Tools / Circular cursor

Custom circular cursor generator

Design a round custom cursor with an inner dot and a separate hover state, test it on links, buttons and fields, then copy one snippet into any website. Made for designers and developers who want a branded cursor without writing the CSS and JavaScript by hand.

FreeRuns in your browserNo sign-upSupport the tools

Start from

Outer ring

Fill

Border

Inner dot

Test area

Move your mouse in here.

Pass over this link, the button and the field to see the hover state.

Your code

Paste it into the <head> or <body> of any site: plain HTML, WordPress, Webflow, Wix.

How to use it

  1. Start from a preset (ring and dot, dot, ring, blob or inverse), or set the ring size, fill colour and opacity, the border and the inner dot in Normal state.
  2. Switch to Hover state and set how the cursor changes over links, buttons and fields. Copy normal settings gives you a starting point.
  3. Move your mouse through the test area and over the link, button and field to check both states.
  4. Turn on Smooth follow for a ring that eases after the mouse, or Blend with the page so it inverts what it passes over. Then copy the code and paste it into the head or body of your site. The cursor stays off on phones and tablets.

Questions

Does the cursor work on phones and tablets?
No. Touch screens have no cursor, so the snippet has no effect there and the page behaves as normal.
Where do I paste the code in WordPress?
In a header or footer code area: a code snippets plugin, your theme's custom code setting, or a Custom HTML block that loads on every page.
Which elements trigger the hover state?
Links, buttons, submit and button inputs, anything with role button, and elements with the classes btn, button, cta or elementor-button.
Does it hide the normal cursor?
Yes. The snippet hides the system cursor on the page and on links, buttons and fields, and draws the circle in its place.

More tools