Gradient Cursor Trail

<div class="gradient-trail-area">

  <div class="gradient-trail-content">
    Move your cursor around this area
  </div>

</div>

.gradient-trail-area{
  position:relative;
  width:100%;
  min-height:220px;

  display:flex;
  align-items:center;
  justify-content:center;

  overflow:hidden;

  background:
    radial-gradient(
      circle at center,
      rgba(139,92,246,.06),
      transparent 55%
    ),
    #070d19;
}

.gradient-trail-content{
  position:relative;
  z-index:2;

  color:#c7d2e5;
  font-size:16px;
  font-weight:600;
  text-align:center;

  pointer-events:none;
}

.gradient-trail-dot{
  position:absolute;
  z-index:1;

  width:18px;
  height:18px;

  border-radius:50%;

  background:
    linear-gradient(
      135deg,
      #22d3ee,
      #8b5cf6,
      #ec4899
    );

  pointer-events:none;

  transform:
    translate(-50%, -50%);

  box-shadow:
    0 0 12px rgba(34,211,238,.45),
    0 0 22px rgba(139,92,246,.30);

  animation:
    gradientTrailFade .7s ease-out forwards;
}

@keyframes gradientTrailFade{

  0%{
    opacity:1;

    transform:
      translate(-50%, -50%)
      scale(1);
  }

  60%{
    opacity:.55;
  }

  100%{
    opacity:0;

    transform:
      translate(-50%, -50%)
      scale(.2);
  }
}

const area =
  document.querySelector('.gradient-trail-area');

if (area) {

  area.addEventListener(
    'mousemove',
    function(event) {

      const rect =
        area.getBoundingClientRect();

      const dot =
        document.createElement('span');

      dot.className =
        'gradient-trail-dot';

      dot.style.left =
        event.clientX -
        rect.left +
        'px';

      dot.style.top =
        event.clientY -
        rect.top +
        'px';

      area.appendChild(dot);

      setTimeout(
        function() {
          dot.remove();
        },
        700
      );

    }
  );

}

How This Component Works

This gradient cursor trail is built with a simple combination of HTML, CSS, and JavaScript working together. The HTML sets up a single container that acts as the interactive zone — this is the area where users move their mouse and see the trail appear. Inside it, JavaScript tracks the cursor’s position in real time using the mousemove event, then dynamically creates small trail elements at those coordinates.

Each trail element is styled with a soft radial gradient and a blur filter, which gives it that glowing, colorful look instead of a hard-edged dot. CSS transitions handle the fade-out, so every particle shrinks and disappears smoothly instead of vanishing instantly. To keep things running smoothly, the script limits how many trail particles exist at once and removes older ones automatically — this stops the effect from slowing down the page during fast mouse movement.

This behavior relies on the browser’s native mousemove event, which is well-supported across all modern browsers including Chrome, Firefox, Edge, and Safari. Since the effect uses no external libraries or frameworks, there’s no extra loading time or dependency to worry about — everything runs on lightweight, native JavaScript and CSS.

Customization Tips

You don’t need to touch the JavaScript to make this gradient cursor trail your own. A few quick tweaks in the CSS file are enough:

• Change the colors — update the gradient values inside the .trail-particle class to match your brand or theme.
• Adjust the trail size — increase or decrease the width/height of each particle for a bolder or subtler effect.
• Control the fade speed — shorten or lengthen the transition duration to make the trail linger longer or disappear faster.
• Limit particle density — if you want a lighter effect, reduce the number of particles generated per mouse movement in the JS file.

Where to Use This

This effect works best in places where you want to add a bit of visual personality without overwhelming the design:

• Portfolio websites — especially on the hero section, to make a strong first impression.
• Landing pages for creative or design services, where a playful cursor effect reinforces a modern, artistic feel.
• Product showcase pages, used sparingly around a hero image or call-to-action area.

It’s not recommended for content-heavy pages like blogs or documentation, since constant motion can distract readers from the text.

If you’re looking for something similar but with a different interaction style, check out our Cursor Trail Effect component, which creates glowing dots instead of a gradient trail.

Frequently Asked Questions

Does this work on mobile devices?
Since mobile devices don’t have a mouse cursor, this effect is designed for desktop use. On touch screens, the trail simply won’t appear, which won’t break anything — it just stays inactive.

Will this slow down my website?
No, as long as the particle limit in the script isn’t increased significantly. The effect is lightweight and uses no external libraries, so it loads instantly alongside your existing page assets.

Can I use this effect on multiple elements on the same page?
Yes, though it’s best used sparingly. Since the effect is tied to mouse movement across the entire container, adding it to more than one large section on a single page can feel repetitive or distracting for users. It works best as a single standout feature rather than a repeated pattern throughout the page.