Summer pricing is live: save $50 on Starwind Pro lifetime access.
Starwind Pro
Back to Effect

Effect 5 - Hover Rotating Gradient Border

Pro

A card with a rotating gradient border that animates only on hover, creating an interactive visual effect.

Upgrade to Pro

Hover Gradient Border

Hover over this card to activate the rotating gradient border animation. The effect pauses when your mouse leaves, creating an interactive experience.

Loading code...

Starwind Dependencies

Sign in to view code and copy install commands.

Sign in

This component requires Starwind Pro.

Get lifetime access to all premium components, updates, and priority support.

Upgrade to Pro

Failed to load code. Please try again.

Code

Usage
<Effect5
  border-width={2}
  duration={7}
/>

Props

proptypedefaultdescription
borderWidth number 2 Border width in pixels.
duration number 7 Hover animation duration in seconds.
colors string[] ["var(--color-blue-600)", "var(--color-purple-600)", "var(--color-pink-600)"] Gradient color stops used by the hover border.