Effect 4 - Rotating Gradient Border

Free

A card with an animated rotating gradient border effect that creates a dynamic, eye-catching visual element.

Theme

Upgrade to Pro

Watch as the gradient border continuously rotates around this card, creating a mesmerizing animated effect that draws attention to your content.

Loading code...

This component requires Starwind Pro.

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

Failed to load code. Please try again.

Code

Usage

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

prop	type	default	description
`borderWidth`	`number`	`2`	Border width in pixels.
`duration`	`number`	`7`	Animation duration in seconds.
`colors`	`string[]`	`["var(--color-blue-500)", "var(--color-violet-500)", "var(--color-pink-500)", "var(--color-emerald-500)"]`	Gradient color stops used by the rotating border.