Glow Cursor

<div class="glow-cursor-area">

  <div
    class="glow-cursor"
    data-glow-cursor
  ></div>

  <div class="glow-cursor-content">
    Move your mouse inside this area
  </div>

</div>

.glow-cursor-area{
  position:relative;
  width:100%;
  min-height:220px;

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

  overflow:hidden;
  cursor:none;
}

.glow-cursor{
  position:absolute;
  top:0;
  left:0;

  width:90px;
  height:90px;

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(34,211,238,.45) 0%,
      rgba(34,211,238,.18) 35%,
      rgba(34,211,238,0) 72%
    );

  pointer-events:none;

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

  filter:blur(2px);

  z-index:9999;
}

.glow-cursor-content{
  position:relative;
  z-index:1;

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

  pointer-events:none;
}

const area =
  document.querySelector('.glow-cursor-area');

const glow =
  document.querySelector('[data-glow-cursor]');

if (area) {

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

      if (!glow) {
        return;
      }

      const rect =
        area.getBoundingClientRect();

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

      glow.style.top =
        event.clientY -
        rect.top +
        'px';
    }
  );

}

How This Glow Cursor Works

This effect creates a soft, circular glow that follows the mouse pointer — similar in concept to the spotlight effect elsewhere on this site, but built with a simpler, single-layer approach. The HTML only needs two elements inside the container (glow-cursor-area): the glow itself (glow-cursor) and a text label.

The JavaScript follows the same pattern used throughout this site’s cursor components — a single mousemove listener calculates the pointer’s position relative to the container using getBoundingClientRect(), then updates the glow’s left and top values directly.

What defines this specific effect is its CSS. The glow uses a radial-gradient with three color stops — a bright cyan center at 45% opacity, fading to a dimmer cyan at 35% of the shape’s radius, then fully transparent by 72%. This creates a smooth, gradual fade rather than a hard-edged circle. A blur(2px) filter is applied on top of the gradient, softening it slightly further for a more diffused glow. Unlike some of the more elaborate cursor effects on this site, there’s no rotation, scaling, or hover-triggered state change here — the glow simply appears on hover and tracks the mouse smoothly, keeping the effect clean and understated.

Customizing This Glow Cursor

Since this effect is built almost entirely with a single CSS gradient, adjusting it is straightforward:

• Change the glow’s color — update the rgba() values inside the radial-gradient in .glow-cursor (currently cyan) to match your site’s theme.
• Adjust the glow size — modify the width and height values (currently 90px) for a larger or smaller glow radius.
• Control the fade pattern — the percentage stops in the gradient (0%, 35%, 72%) determine how gradually the glow fades from bright center to transparent edge; adjusting these changes how “hard” or “soft” the glow’s edge appears.
• Adjust the blur strength — increasing the blur() filter value creates a hazier, more atmospheric glow, while reducing it sharpens the gradient’s edges.

Where to Use This Glow Cursor

This effect works well anywhere you want a soft ambient light source without additional visual complexity:

• Dark-themed hero sections, where the glow provides gentle visual interest without competing with headline text.
• Product or feature showcase pages, used as a subtle background accent rather than a primary interactive element.
• Minimalist portfolio sites, where restraint and simplicity are part of the design language.

Since this effect is visually simpler than the spotlight effect, it’s a good choice when you want ambient cursor interactivity without a strong content-highlighting component attached to it.

Frequently Asked Questions

How is this different from the Cursor Spotlight Effect on this site?
The core mechanism — tracking the mouse with a radial gradient — is similar, but the spotlight effect layers in additional gradient stops and pairs the glow with an overlaid content block (a heading and description) that appears to be “illuminated.” This glow cursor effect is simpler and more minimal, using a single soft gradient without any accompanying content layer.

Can I make the glow more intense or vivid?
Yes — increasing the opacity values in the rgba() color stops (for example, raising .45 to .65 in the first stop) will make the glow appear brighter and more saturated. Reducing the blur() value will also make the color stand out more sharply.

Does this effect impact page load time?
No. Since the glow is a single CSS-generated gradient rather than an image or multiple layered elements, it adds virtually no load time and renders instantly using the browser’s native gradient rendering.