Effect 5 - Hover Rotating Gradient Border

Pro

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

Theme

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

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

prop	type	default	description
`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.