Dan Powell

Dan Powell

← Back to home
Preview of Spotlight Gradient
View on CodePen ↗

Spotlight Gradient

CSS custom properties (variables) has unlocked a world of fun.

This gradient-based spotlight follow cursor on hover, spotted over at airbnb.com button only requires a simple mousemove event listener to update 2 style properties, mouseX and mouseY--with left/top being 0% and right/bottom being 100%.

CSS does the rest!