Hover Glow Effect

Hover Glow Effect adds a living light source to any container on your site.

Hover Glow Effect adds a living light source to any container on your site. The moment a visitor's cursor enters the element, a soft radial glow fades in and follows their movement in real time, and a second, more focused glow traces only the border itself, creating a glassy, illuminated outline exactly where the light meets the edge. The color is never static. It continuously cycles through eight curated hues - pink, orange, amber, green, cyan, blue, violet, and magenta, blending smoothly from one to the next so the effect always feels alive, never repetitive or jarring. Drop it into a card, button, hero panel, or full section. It sits as an overlay, so it works with whatever's already inside the container, and fades out cleanly the instant the cursor leaves. Customizable properties: Radius: match the glow's corners to your container's border radius Border: control how thick the glassy border highlight is Glow Size: adjust how large the light radius is around the cursor Glow Intensity: control opacity/brightness of the glow Color Speed: set how fast the hue cycles through the palette Suggested use cases Cards (pricing, feature, project, product) Buttons Small panels or tiles

Glowing Hover Effect