OneTaskBy Tim King · Updated
Cursor Trail
Canvas-Drawn Fading Dots With Adjustable Colour, Trail Length and Dot Size
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 Cursor Trail works
A cursor trail leaves a stream of fading dots behind the mouse as it moves across a section. Set the colour, trail length and dot size, move your mouse over the preview, then copy the HTML, CSS and JavaScript.
A mouse trail adds a playful touch to a landing page hero, a portfolio or a game page without changing how the page works. It sits behind the content and never blocks clicks.
How the cursor trail works
A <canvas> fills the section and ignores the pointer. Each pointermove adds the pointer
position to a short list, and every animation frame redraws the list with older dots smaller
and more transparent. When the pointer stops, the oldest dot drops off each frame, so the trail
shrinks back to nothing. A ResizeObserver keeps the canvas sharp at any size and pixel ratio.
Accessibility and performance
The canvas is aria-hidden because it is pure decoration. Visitors who ask for reduced motion
in their system settings get no trail at all, and the loop stops when the section is removed.
FAQ
Does the cursor trail work on touch screens?
Pointer events cover touch and pens as well as the mouse, so dragging a finger across the section draws the trail too. It clears when the finger lifts, because the pointer leaves the section.
Can the trail cover the whole page?
Yes. Put the canvas in a fixed element that covers the viewport with position: fixed; inset: 0
and listen for pointermove on window instead of the section. Keep pointer-events: none so
the page stays clickable.
Will this slow my page down?
Drawing a few dozen circles per frame is very cheap. The loop only runs while the section is on the page, and it never runs at all for visitors who have reduced motion turned on.
How is this different from a custom cursor?
A custom cursor replaces the pointer itself with a styled dot or ring. A cursor trail keeps the normal pointer and adds a fading tail behind it, so the two can be combined on one page.
See also: all Shadows & Motion tools, Layout & Spacing, Shapes & SVG, UI Components, Forms & Inputs, Colour.
Related tools
Custom Cursor
Build a dot and ring custom cursor that grows over links.
Hero Section Builder
Landing page hero sections with fluid headline and buttons.
Text Animation
Animate a headline letter by letter and copy the CSS.
CSS Pattern Generator
Repeating background patterns built from CSS gradients, no images.
Gradient Maker
Linear, radial and conic CSS gradients with live preview.