Docs
Stripe Animated Gradient
Stripe Animated Gradient
Recreate the iconic animated gradient from Stripe with this seamless background animation component.
Stripe Animated
Gradient
Installation
pnpm dlx shadcn@latest add to-setup
Usage
import { AnimatedGradient } from "@/components/ui/stripe-animated-gradient";<AnimatedGradient
color1="#a960ee"
color2="#ff333d"
color3="#90e0ff"
color4="#ffcb57"
/>Note
The parent container must be set toposition: relativefor the BorderBeam effect to work properly.
Additionally, this component is likely resource-intensive and will likely undergo a rework soon.
Props
AnimatedGradient props.
| Prop | Type | Description | Default |
|---|---|---|---|
| color1 | string | First color of the gradient. | #a960ee |
| color2 | string | Second color of the gradient. | #ff333d |
| color3 | string | Third color of the gradient. | #90e0ff |
| color4 | string | Fourth color of the gradient. | #ffcb57 |
Credits
I didn't create the original effect; I simply adapted it to work with React. Full credit goes to: