OneTaskBy Tim King · Updated
Spotlight Effect
Mouse-Follow Spotlight in CSS and JavaScript
OneTask is free, with no sign-up, and built by one person.
If this tool saved you time, a coffee helps keep new ones coming.
How the Spotlight Effect works
A spotlight effect puts a soft pool of light under the visitor's pointer and moves it as they move. Set the spotlight size, colour and strength, move your mouse over the preview to try it, then copy the HTML, CSS and JavaScript.
A pointer spotlight makes a dark section feel interactive without any animation running on its own. It suits product heroes, pricing sections and card grids where you want a little polish.
How the spotlight effect works
The glow is a radial-gradient on a ::before layer that covers the section. Its centre is set
by two custom properties, --x and --y, which default to the middle. A pointermove listener
writes the pointer position into those properties, and the browser repaints the gradient. There
is no animation loop, so nothing runs while the pointer is still.
Touch screens
On phones the pointermove event fires while a finger drags across the section. Before any touch
the spotlight rests in the centre, so the section still looks finished.
FAQ
Does the spotlight effect need a library?
No. It is one CSS rule and a six-line script. The gradient does the drawing and the script only passes the pointer position to CSS, so there is nothing to install and nothing to load.
Can I use the spotlight on cards instead of a whole section?
Yes. Give each card the same class, position: relative and overflow: hidden, and the script
already loops over every matching element, so each card gets its own light that follows the
pointer independently.
Does it affect people who prefer reduced motion?
The spotlight only moves when the visitor moves, so it is direct feedback rather than automatic
motion. If you want to be stricter, wrap the listener in a prefers-reduced-motion check and the
light will stay in the centre.
Why does the text stay readable under the light?
The glow layer sits underneath the content and ignores the pointer, and the strength setting controls how opaque the light is. Keep the strength low on dark backgrounds so white text still has plenty of contrast.
See also: all Shadows & Motion tools, Layout & Spacing, Shapes & SVG, UI Components, Forms & Inputs, Colour.
Related tools
Cursor Trail
Add a fading dot trail that follows the mouse.
Glow Effect
Neon glow for headings and buttons, pure CSS.
Aurora Background
Make a soft northern lights glow that drifts behind a section.
Glass Button Builder
Frosted glass buttons with glow, lift and a shine sweep.
Hero Section Builder
Landing page hero sections with fluid headline and buttons.