Animated gradient

Install

npm:

npm install anim-gradient

yarn:

npm install anim-gradient

How to use

• set this on your index.html file

<canvas id="gradient-canvas" width="800" height="600"></canvas>

• set 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 call initGradient function

import { Gradient } from 'anim-gradient';

const gradient = new Gradient()
gradient.initGradient('#gradient-canvas');

• set this on nuxt.config.js

  build: {
    transpile: [
      'anim-gradient'
    ]
  }

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