CSS · 80 ms

Spotlight glow

A soft radial glow that tracks the cursor across an element.

Same primitive as the hero grid: track pointer position into CSS custom properties (`--mx`, `--my`), use a radial-gradient referencing those props inside the element. The element brightens where the cursor is. Use on dark cards, hero CTAs, or anywhere you want a single warm focal point that follows the user's eye.

udaysinh

Demo

Live demo

Hover the card

The glow follows where you look — a single warm focus on an otherwise dark card.

The demo runs the same CSS code shown below — replay to retrigger.

Code

Pointermove updates --mx and --my in pixels.js

const el = document.querySelector('.spotlight');
el.addEventListener('pointermove', (e) => {
  const r = el.getBoundingClientRect();
  el.style.setProperty('--mx', `${e.clientX - r.left}px`);
  el.style.setProperty('--my', `${e.clientY - r.top}px`);
});

Radial gradient at the cursor, behind the content.css

.spotlight {
  position: relative;
  overflow: hidden;
  --mx: 50%;
  --my: 50%;
}
.spotlight::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(
    circle 220px at var(--mx) var(--my),
    rgba(255, 200, 120, 0.45),
    transparent 70%
  );
  pointer-events: none;
  transition: opacity 200ms;
}
.spotlight > * { position: relative; }