Effects/GradientBorder

GradientBorder

A wrapper that gives any element an animated rotating gradient border. Great for premium cards, featured sections, and call-to-action buttons.

import { GradientBorder } from "@animui/ui"

Animated (default)

Gradient Border

Animated rotating gradient.

Highlight important content.

Prop	Type	Default	Description
`gradient`	`string`	`"linear-gradient(135deg,#8b5cf6,#3b82f6,#10b981,#8b5cf6)"`	CSS gradient for the border.
`borderWidth`	`number`	`2`	Border thickness in px.
`borderRadius`	`string`	`"16px"`	Border radius of the outer container.
`animated`	`boolean`	`true`	Whether the gradient rotates continuously.
`duration`	`number`	`4`	Rotation duration in seconds.
`innerClassName`	`string`	—	Classes on the inner white content box.
`className`	`string`	—	Classes on the outer wrapper.