Spotlight Glare Card
A glossy card element where a soft, radial gradient spotlight perfectly tracks the user's mouse position over the surface, creating a physical "glare" effect.
Live Demo
Premium Feature
Hover to reveal the radiant spotlight effect.
What It Is
A glossy card element where a soft, radial gradient spotlight perfectly tracks the user's mouse position over the surface, creating a physical "glare" effect.
✓When to Use
- Pricing tables
- Premium feature grids (Bento grids)
- SaaS landing pages
✕When NOT to Use
- High-density data tables
- Text-heavy documentation
Configuration Tips
- 01Use a mouse move event listener to map clientX/clientY to the background radial-gradient coordinates
You've Seen It In
Prompt Templates
Copy and paste these prompts into your AI coding assistant.
Create a dark card that tracks the mouse hover. A soft white radial gradient should follow the mouse underneath the card's translucent border.
Code Example (Tailwind CSS)
export function HoverGlareCardDemo() {}Related Effects
Spotlight / Coach Mark
The entire screen dims with a dark overlay, except for a highlighted "cutout" over a specific UI element, paired with an explanatory tooltip.
3D Tilt Parallax Card
Cards that literally tilt on their X and Y axes in response to mouse movement. Internal elements (like a logo or image) often move at a faster rate to simulate true 3D depth.