Stripe Gradient is a very easy-to-implement and lightweight JavaScript plugin that creates smooth gradient background animation on a Canvas element. Just follow the steps below and create your own gradient animation.

Features:

How to use it:

1. Include the Javascript stripe-gradient.js at the bottom of the web page.

<script src="js/stripe-gradient.js"></script>

2. Add the basic HTML to the page.

<canvas id="demo"></canvas>

3. Initialize the plugin and we're ready to go.

(function() {
  'use strict';
   new Gradient({
     canvas: 'canvas#demo',
     colors: ['#a960ee', '#ff333d', '#90e0ff', '#ffcb57']
   });
})();

Default Example

HTML structure

<canvas id="demo"></canvas>

Script

(function() {
  'use strict';
   new Gradient({
     canvas: 'canvas#demo',
     colors: ['#a960ee', '#ff333d', '#90e0ff', '#ffcb57']
   });
})();