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
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
