Design Atlas
한국어
✦ Visual effects

Spotlight card

스포트라이트 카드

A round glow that follows the cursor and lights up a faint grid texture on a card's surface, making a flat card feel alive.

Also known as: Cursor spotlightRadial hover glow
···
html
<div class="spot" id="sp"><div class="grid"></div><div class="glow"></div><div class="content"><strong>Spotlight</strong><span>move your cursor</span></div></div>
css
.spot{--x:30%;--y:30%;position:relative;width:min(300px,85%);aspect-ratio:16/10;border-radius:18px;overflow:hidden;
  background:var(--surface);border:1px solid var(--line);display:grid;place-items:center;cursor:pointer}
.grid{position:absolute;inset:0;opacity:.5;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:22px 22px}
.glow{position:absolute;inset:0;
  background:radial-gradient(220px circle at var(--x) var(--y),color-mix(in srgb,var(--accent) 45%,transparent),transparent 65%)}
.content{position:relative;text-align:center;display:grid;gap:4px}
.content strong{color:var(--fg);font-size:17px}
.content span{color:var(--muted);font-size:12px}
js
const el = document.getElementById('sp');
let auto = true, t = 0;
function setPos(xp, yp){ el.style.setProperty('--x', xp + '%'); el.style.setProperty('--y', yp + '%'); }
function loop(){
  if (auto) { t += 0.014; setPos(50 + Math.sin(t) * 34, 45 + Math.cos(t * 1.3) * 30); }
  requestAnimationFrame(loop);
}
loop();
el.addEventListener('pointermove', (e) => {
  auto = false;
  const r = el.getBoundingClientRect();
  setPos(((e.clientX - r.left) / r.width) * 100, ((e.clientY - r.top) / r.height) * 100);
});
el.addEventListener('pointerleave', () => { auto = true; });

Lay very faint grid lines across the card's background, then overlay a radial-gradient pool of light at the cursor's position. Storing the card-relative coordinates in CSS custom properties (--x, --y) on every pointermove lets pure CSS track the position.

Where a plain spotlight hover changes the brightness or colour of the element itself, a spotlight card adds a separate light layer that reveals a texture sitting underneath — a grid, noise, or dot pattern. Line up several cards in a grid and apply this only to the one under the cursor, and it doubles as a "this is the one you're pointing at" signal.

In the card preview, with no real pointer, the light drifts in a slow circle on its own so the effect is always visible — as soon as a real pointer arrives, it hands off to that position immediately.

When to use

Use on a feature-card grid or a pricing comparison table. The grid-versus-glow contrast reads best on a dark surface — lower the grid opacity further on light backgrounds.