Shadcn.io is not affiliated with official shadcn/ui
React Spotlight Background
Interactive cursor-following spotlight with smooth gradient glow that tracks mouse movement
A soft, radial gradient that follows your cursor around the screen. It's that subtle spotlight effect you see on premium sites like Linear and Stripe—creates depth and draws attention without being distracting. The glow smoothly eases toward the cursor position rather than snapping, which feels much more natural. When there's no mouse activity (or on mobile), it drifts slowly in ambient mode. You can stack multiple spotlights with different colors for richer effects. It's pure CSS gradients with JS for positioning, so performance is excellent. Great for hero sections, pricing pages, or anywhere you want that polished, interactive feel.
React Spotlight Background preview
Installation
Related Components
Gradient Background
Floating gradient blobs
Aurora Background
Flowing aurora waves
Dot Pattern
Interactive dot grid
Gradient Animation
Animated gradient mesh
Interactive Grid
Mouse-reactive grid
Light Waves
Ambient wave animation
FAQ
Was this page helpful?
Sign in to leave feedback.