Spotlight Effect
A 150 px radial-gradient follows the mouse in real time via CSS custom properties --spotlight-x/y updated by mousemove — the cursor illuminates the element like a lamp. JavaScript required, 400 bytes.
Updated
This effect is part of Effect.Labs — 840 vanilla effects, some free, some premium. Hover has 48 effects, including 5 free. Explore the category →
3 usage examples
How it works
The .fx-0357-root root centers a .hover-box.hover-spotlight block of 200 × 200 px. A 150 × 150 px ::before pseudo-element carries a radial-gradient(circle, rgba(99,102,241,.4) 0, transparent 70%); it is positioned via left: var(--spotlight-x, 50%); top: var(--spotlight-y, 50%) with transform: translate(-50%, -50%) to center the light spot on the variable's position. At rest, opacity: 0; on hover, opacity: 1.
The script searches all [data-spotlight] inside .fx-0357-root and listens to mousemove on each. On each move, it computes the cursor position within the element (clientX − rect.left) and updates --spotlight-x and --spotlight-y on the element. CSS reads these variables and repositions the ::before in real time. Under prefers-reduced-motion: reduce, the script does not register and no mouse tracking occurs.
Measured in Chromium 151: spotlight follows the mouse, two copies on a page — each spotlight tracks its own mouse independently. The effect requires a mouse: no keyboard or touch tracking.
Accessibility
- Reduced motion: under
prefers-reduced-motion: reduce, the script does not initialize and the spotlight does not follow the mouse. The element stays visible and usable without animation. - Keyboard and touch: the spotlight follows the mouse (mousemove) and cannot be reproduced with the keyboard or touch — an inherent limitation of pointer interaction. The element stays functional without the effect.
- Content: the spotlight is purely decorative (pseudo-element). All text content stays accessible and readable in every state.
- Focus: to signal keyboard focus, add
:focus-visible { outline: 2px solid #6366f1; }on.hover-spotlightin your page CSS.
Browser compatibility
CSS custom properties (--spotlight-x, --spotlight-y) + 400 bytes of JavaScript (mousemove, getBoundingClientRect, matchMedia), no dependencies. Measured in Chromium 151: precise mouse tracking, two independent copies. CSS custom properties available since Chrome 49, Firefox 31, Safari 9.1.
Without JavaScript, the spotlight does not activate and the element stays at rest. Without CSS custom properties, the pseudo-element stays centered (default value 50%).
The code
HTML structure to paste into your page (the CSS + JS come with your purchase):
<div class="fx-0357-root">
<div class="hover-box hover-spotlight" data-spotlight="">
<span>…</span>
</div>
</div>One-time payment, no subscription — the code is yours forever
Customize
Options passed to the API or data-* attributes:
| Option / property | Default | Effect |
|---|---|---|
Spotlight radius (CSS — width / height of ::before) |
150 × 150 px | A larger radius (200 px) gives a more diffuse light; smaller (80 px) concentrates the beam. |
Light color (CSS — rgba(99,102,241,.4) in the radial-gradient) |
Indigo at 40% opacity | Change color and opacity: rgba(255,255,255,.3) for white light; rgba(251,191,36,.5) for amber vintage spotlight light. |
Gradient softness (CSS — 0, transparent 70%) |
Full center, fade from 0 to 70% | transparent 50% gives a harder light circle; transparent 90% spreads light over almost the entire element. |
Opacity at rest (CSS — opacity: 0 on ::before) |
Invisible at rest | opacity: .1 leaves a faint permanent glow, indicating the spotlight is active even without hovering. |
Listening zone (HTML — data-spotlight) |
The .hover-spotlight element itself |
Put data-spotlight on a larger container to extend the tracking zone without changing the size of the illuminated element. |
FAQ
mousemove which is not triggered by an ordinary touch. On mobile, the element stays at rest. The effect is designed for cursor interfaces.[data-spotlight] inside each .fx-0357-root and gives each its own independent listener. Duplicate the HTML structure as many times as needed — each spotlight tracks its own mouse.overflow: hidden on .hover-box keeps the ::before inside the element. Remove overflow: hidden if you want the glow to slightly overflow.
