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: relative
for 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: