Docs
Stripe Animated Gradient
Stripe Animated Gradient
Recreate the iconic animated gradient from Stripe with this seamless background animation component.
Loading...
Installation
Install dependencies
npm install
Add utils file
lib/utils.ts
Copy the gradient.js File
gradient.js
Copy the source code
animated-gradient.tsx
Props
Prop | Type | Description | Default |
---|---|---|---|
color1 | String | The first color in the animated gradient. | "#a960ee" |
color2 | String | The second color in the animated gradient. | "#ff333d" |
color3 | String | The third color in the animated gradient. | "#90e0ff" |
color4 | String | The fourth color in the animated gradient. | "#ffcb57" |
Credits
This component is inspired by the classic animated gradient design from Stripe. I didn't create the original effect; I simply adapted it to work with React. Full credit goes to: