Animated gradient
Install
npm:
npm install anim-gradient
How to use
- Setup this on your
main.css
file
#gradient-canvas {
--gradient-color-1: #6ec3f4;
--gradient-color-2: #3a3aff;
--gradient-color-3: #ff61ab;
--gradient-color-4: #E63946;
}
- Import Gradient class, create new instance and run
initGradient
import { Gradient } from 'anim-gradient';
const gradient = new Gradient()
gradient.initGradient('#gradient-canvas');
Inspiration
Based on the tilted gradient effect on Stripe's website. Functionality found in Kevin Hufnagl
website.
Related
Kevin Hufnagl
— Learn how to create the tilted gradient effect on Stripe's new website.Stripe
— Stripe's website
License
MIT © Federico Biondi