Spotlight Hover Card — Cursor Glow HTML CSS JS

The spotlight card — a dark card that lights up with a soft radial glow tracking your cursor, its border illuminating where the light falls — is one of the most-requested modern UI effects, popularized by sites like Aceternity and Vercel. It looks expensive but is built from a radial gradient and two CSS custom properties. This snippet recreates it in plain HTML, CSS, and vanilla JavaScript, across a responsive grid of cards.

The glow is a gradient positioned by CSS variables

The core trick is simple: each card has a background: radial-gradient(... at var(--mx) var(--my) ...), and a tiny pointermove listener updates those --mx / --my variables to the cursor's position relative to the card. Because the gradient's center is bound to the variables, the glow follows the pointer with no per-frame canvas drawing or heavy JavaScript — the browser repaints the gradient natively. This is the whole effect in one idea: move the gradient's origin to wherever the mouse is.

An illuminated border, not just a fill

The polished version of this effect lights up the card's *edge* where the cursor is near, like light catching a rim. That's done with a second radial gradient on a ::before pseudo-element, clipped to just a 1px border using the CSS mask trick: two stacked masks (content-box and full) composited with xor / exclude punch out the interior, leaving only the border painted by the gradient. The result is a glowing border segment that brightens nearest the cursor — the detail that separates a flat hover tint from the premium spotlight look.

One listener drives every card

A single pointermove listener on the grid updates all cards at once, each computing its own cursor-relative coordinates from its getBoundingClientRect(). This means as the cursor sweeps across the grid, every card's glow tracks correctly, and the card directly under the pointer lights up most while neighbors catch a softer edge — exactly the multi-card spotlight behavior. Using pointermove (rather than mousemove) also covers pen and touch input on devices that support hover.

Hover-gated for performance and correctness

The glow and border are at opacity: 0 by default and fade in only on :hover, so cards sit calm until you interact, and the gradient repaint cost is only paid for hovered cards. On touch-only devices with no hover, the cards simply render as clean static cards — graceful degradation with no broken state, since the effect is a pure enhancement.

Layering done right

Getting the stack order correct is the fiddly part: the glow sits behind the content (z-index: -1), the inner body has its own solid background so the glow only shows at the padded edge (creating the gradient-border illusion), and the illuminated ::before border sits above with pointer-events: none so it never intercepts clicks. This snippet wires that layering so you can drop in your own card content without fighting the effect.

Why CSS variables over canvas

You could draw this with canvas or WebGL, but binding a gradient to CSS custom properties is dramatically simpler, fully responsive, accessible (the content is real DOM, not pixels), and costs almost nothing — the browser's compositor handles the gradient. It also re-themes trivially: change the glow colors and radius and it fits any palette.