Hover Glow Effect

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