glow cursor hover light spotlight cursor spotlight glow on cards interactive glow following mouse hover highlight effect hover states feel too subtle need cursor-aware glow without canvas/WebGL want spotlight effect on interactive elements
Glow
Fetch snippet JSON:
curl https://webspire.de/snippets/interactions/glow.json
Glow
Pointer-driven highlight
Hover
A soft reactive glow follows the cursor and makes the surface feel alive.
Background
Customize
Quick Start
<div class="glow rounded-xl bg-white/5 p-6">Hover me</div>Details
- Tailwind
- v4.x
- Browser
- baseline-2024
- A11y
- prefers-reduced-motion
- Size
- 648 bytes · 33 lines
- Custom Properties
-
--glow-color--glow-size--glow-opacity--glow-x--glow-y - Classes
-
.glow
glow cursor hover light spotlight
A cursor-following glow effect using a ::before pseudo-element with radial-gradient. The glow appears on hover and tracks the mouse via custom properties.
Glow card
<div class="glow rounded-xl border border-white/10 bg-white/5 p-8 text-white"
onmousemove="const r=this.getBoundingClientRect();this.style.setProperty('--glow-x',(event.clientX-r.left)+'px');this.style.setProperty('--glow-y',(event.clientY-r.top)+'px')"
onmouseleave="this.style.setProperty('--glow-opacity','0')">
<h3 class="text-lg font-bold">Glow Card</h3>
<p class="mt-2 text-sm text-white/60">Move your cursor over the card</p>
</div>