Spotlight Card
also known asspotlight effect · cursor-tracking glow · flashlight card · aurora card
A card with a soft radial glow that follows the cursor, usually combined with a hairline border on a dark surface.
A spotlight card tracks the cursor's position relative to itself and renders a soft radial gradient as a pseudo-element where the cursor hovers. The effect resembles a flashlight gliding across the card surface — most visible on dark backgrounds with a low-contrast hairline border that catches the highlight.
Implementation is lightweight: a `pointermove` listener writes the cursor's `(x, y)` into CSS custom properties on the card, and a `::before` overlay uses those properties as the center of a `radial-gradient`. No JavaScript-driven repaints, no animation library required.
The pattern signals high craft on dark UIs — common on developer tools, AI products, and pricing pages where each plan card needs to feel premium. It works because dark cards are otherwise visually inert; the spotlight gives them a sense of being lit, not just colored.
- Pricing cards on dark-mode marketing pages
- Feature cards on developer tools and AI products
- Hero CTAs that need to feel premium without animation
- Light-mode UIs — the effect needs darkness to read
- Touch-first products — there's no cursor to track
- Dense card grids (10+ cards) — too many spotlights = chaos
- +Use a 1px hairline border at ~8% white — the spotlight makes it shimmer
- +Keep the radial gradient soft (200–300px radius, 30–40% opacity)
- +Limit to 2–4 cards per section — the effect needs breathing room
- +Disable on `(pointer: coarse)` for touch devices
- −Don't use saturated primary colors for the glow — keep chroma muted
- −Don't combine with a magnetic cursor on the same card — too much interaction
People also ask
How is spotlight card built without performance issues?
Write the cursor's `(x, y)` directly to CSS custom properties via a pointer listener. The browser uses the variables in a `radial-gradient` on a `::before` pseudo-element — no React re-renders, no animation library, just a single CSS variable update per `pointermove`.