Cursor Spotlight Reveal — Free CSS Mask Follow-the-Cursor Snippet

Two identical copies of the same content are stacked — one dim and always visible, one bright and hidden behind a circular CSS mask — so that only the area directly under the cursor reveals the vivid version underneath, like a flashlight sweeping a dark room. This snippet uses mask-image: radial-gradient(...) positioned by real mousemove coordinates, not a static hover effect.

Two stacked layers, one masked

The panel contains a .csr-dim layer (muted colors, always fully visible) and an identical .csr-lit layer (vivid colors, gradient text) positioned exactly on top of it with position: absolute; inset: 0. Because the content is duplicated rather than toggled, there is no flash or reflow when the mask moves — the bright version is always rendered, just clipped to a small circle by the mask.

The mask is a positioned radial-gradient

mask-image: radial-gradient(circle 120px at var(--csr-x) var(--csr-y), #000 55%, transparent 100%) draws a circle whose center comes from two CSS custom properties. A radial-gradient used as a mask makes its opaque stops (black, by mask convention) show the masked element and its transparent stops hide it — so the #000 55%, transparent 100% stop pair creates a solid spotlight core that feathers to nothing at its edge, rather than a hard-edged circle.

Real mousemove drives the mask, not a hover state

Every mousemove over the panel computes the cursor's position relative to the panel with getBoundingClientRect() and writes it straight into --csr-x/--csr-y via style.setProperty. Because the mask's at position references those same custom properties, the browser recomputes the gradient's center on every event — the spotlight is following the literal cursor coordinate every frame, not playing a fixed animation triggered by a hover class.

Leaving and touch

mouseleave resets the custom properties to an off-panel coordinate, so the spotlight disappears cleanly rather than freezing at its last position. A parallel touchmove/touchend pair gives the same behavior for a finger dragging across the panel on touch devices, since there is no persistent hover state to fall back on there.

Customizing it

Change the spotlight radius (both the circle 120px in CSS and nothing else needs to change, since JS only ever sets the center), swap the feather stop percentages for a harder or softer edge, or reveal an image instead of text. Pair it with a custom cursor for a themed pointer, or cursor text for a cursor-following label alongside the spotlight.