BadtzUIBeta
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 to position: 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.

PropTypeDescriptionDefault
color1stringFirst color of the gradient.#a960ee
color2stringSecond color of the gradient.#ff333d
color3stringThird color of the gradient.#90e0ff
color4stringFourth 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:

  • Stripe
  • @kevinhufnagl
  • Animated Card 3Blur Reveal