OneTaskBy Tim King · Updated
Custom Cursor Generator
Dot and Ring Cursor in CSS and JS
OneTask is free, with no sign-up, and built by one person.
If this tool saved you time, a coffee helps keep new ones coming.
How the Custom Cursor works
A custom cursor replaces the system pointer with your own design, such as a small dot with a ring that trails behind it. Choose a dot, a ring or both, set the colour, size, lag and how much it grows over links, move your pointer around the preview, and copy the code.
A styled pointer is a signature touch on portfolio, agency and product launch sites. It should stay small, fast and readable, because people need to know exactly where they are clicking.
How the custom cursor works
The dot and ring are two empty elements fixed to the viewport with pointer-events: none, so clicks
pass straight through them. A short script copies the pointer position into the --x and --y
custom properties, and a single transform places each element. The ring has a CSS transition on
its transform, which is what makes it trail slightly behind the dot. When the pointer is over a link
or button, the script sets --s and both parts scale up.
Touch screens and accessibility
The cursor only appears inside a hover: hover and pointer: fine media query, so phones and
tablets keep their normal behaviour and the system cursor is only hidden when a mouse is present.
Reduced motion turns off the trailing lag. The elements are hidden from screen readers.
FAQ
Why does the cursor lag behind the mouse?
The lag comes from the transition on the ring. Set the trailing lag to zero for a ring that sticks to the pointer exactly. A little lag looks smooth, but more than about 200 milliseconds can make precise clicking harder.
Why is my normal cursor still showing over some elements?
Elements with their own cursor rule, such as text inputs or elements styled by a library, override
the body rule. Add them to the cursor: none selector, or keep the system cursor on form fields
deliberately so typing positions stay clear.
Can I use an image as the cursor instead?
For a static image, the CSS cursor: url(cursor.png) 8 8, auto property is simpler and needs no
script. Use the script approach when you want animation, trailing or growth over links.
Does a custom cursor slow the page down?
Not noticeably. The script only writes two custom properties per pointer move, and the browser
animates transform without relayout, so it stays smooth even on busy pages.
See also: all UI Components tools, Layout & Spacing, Shadows & Motion, Shapes & SVG, Forms & Inputs, Colour.
Related tools
Magnetic Button
Build a button that is pulled toward the cursor as it approaches.
Hover Effect Builder
Build animated hover effects for buttons and links.
Fade-In Generator
Generate a CSS fade-in animation with delay, easing and blur.
Glass Button Builder
Frosted glass buttons with glow, lift and a shine sweep.
Hover Card Builder
Card hover effects with timing controls, previewed live.