Cursor Spotlight Effect

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

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

  <div class="spotlight-content">

    <span>INTERACTIVE EFFECT</span>

    <h2>Follow the Light</h2>

    <p>
      Move your mouse around this area.
    </p>

  </div>

</div>

.cursor-spotlight-area{
  position:relative;
  width:100%;
  min-height:240px;

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

  overflow:hidden;
  cursor:crosshair;

  background:
    linear-gradient(
      135deg,
      #050914,
      #09111f
    );
}

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

  width:280px;
  height:280px;

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(34,211,238,.24) 0%,
      rgba(34,211,238,.14) 25%,
      rgba(139,92,246,.08) 45%,
      transparent 72%
    );

  pointer-events:none;

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

  filter:blur(4px);

  z-index:1;
}

.spotlight-content{
  position:relative;
  z-index:2;

  text-align:center;

  pointer-events:none;
}

.spotlight-content span{
  display:inline-block;

  color:#22d3ee;

  font-size:11px;
  font-weight:800;
  letter-spacing:2px;
}

.spotlight-content h2{
  margin:10px 0 8px;

  color:#ffffff;

  font-size:34px;
  line-height:1.2;
}

.spotlight-content p{
  margin:0;

  color:#94a3b8;

  font-size:15px;
  line-height:1.6;
}

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

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

if (area) {

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

      if (!spotlight) {
        return;
      }

      const rect =
        area.getBoundingClientRect();

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

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

}

How This Component Works

This effect creates a soft, glowing circle of light that follows the mouse pointer across a dark background — like a spotlight moving over a stage. The HTML sets up a container (cursor-spotlight-area) with two parts inside: the spotlight element itself (cursor-spotlight) and a block of text content (spotlight-content) that sits underneath it.

The JavaScript logic here is simpler than in other cursor effects — it only needs one event listener. On every mousemove inside the container, it calculates the cursor’s position relative to the container using getBoundingClientRect(), then directly updates the spotlight’s left and top position so it tracks the mouse in real time.

The glowing look itself comes entirely from CSS, not JavaScript. The spotlight element uses a radial-gradient background — cyan at the center, fading through a hint of purple, and disappearing into full transparency at the edges. A blur(4px) filter softens the gradient’s edges further, giving it a diffused, glowing quality rather than a sharp circle. By default, the spotlight is invisible (opacity: 0); it only becomes visible when the user hovers over the container, controlled by a simple :hover CSS rule rather than JavaScript. This means the spotlight fades in smoothly when the mouse enters the area and disappears again when it leaves.

Customization Tips

Most of this cursor spotlight effect’s appearance can be changed directly through the CSS, without touching any JavaScript:

• Change the spotlight color — update the colors inside the radial-gradient in .cursor-spotlight (currently cyan fading to purple) to match your site’s palette.
• Adjust the spotlight size — increase or decrease the width and height values (currently 280px) for a wider or more focused glow.
• Control the glow softness — the filter: blur(4px) value can be increased for a hazier, more diffused look, or reduced for a sharper edge.
• Change the fade-in speed — the transition: opacity .18s ease value controls how quickly the spotlight appears and disappears on hover.

Where to Use This

Because this effect relies on a dark background to stand out, it works best in visually striking, high-impact sections:

• Hero sections on dark-themed websites, where the spotlight draws attention directly to a headline or call-to-action.
• Product launch or landing pages, especially when paired with a bold heading like the demo’s “Follow the Light.”
• Agency or portfolio homepages, where subtle interactivity reinforces a modern, premium feel.

This effect depends heavily on contrast, so it won’t look right on light-colored backgrounds — the glow needs a dark surface to remain visible and effective.

If you’d prefer an effect that reacts to clicks rather than continuous movement, check out our Click Ripple Cursor component for a different kind of interactive feedback.

Frequently Asked Questions

Why does the spotlight disappear when I move my mouse outside the container?
This is intentional. The spotlight’s visibility is tied to a CSS :hover state on the container, so it only shows up while the cursor is actively inside that specific area — this keeps the effect contained and prevents it from lingering awkwardly elsewhere on the page.

Can I use this spotlight effect on a full-page background instead of a small section?
Yes, though you’d need to apply the cursor-spotlight-area class to a larger wrapping element, such as your page’s hero container. Since the JavaScript calculates position relative to whichever container holds the spotlight, it will scale correctly as long as that container’s position: relative is preserved.

Does this affect page performance on lower-end devices?
Minimally. The effect only updates a single element’s position on mouse movement and uses native CSS for the glow and blur, so there’s very little computational overhead compared to effects that generate multiple elements dynamically, like particle trails.

What’s the difference between this spotlight effect and a basic cursor glow?
A basic glow typically just adds a soft shadow around the cursor itself. This cursor spotlight effect goes further by illuminating the content underneath it too — the radial gradient interacts with the dark background to create the illusion of a physical light source moving across the page, rather than just decorating the pointer.