Animated Gradient Background Inspired By Stripe.com - stripe-gradient.js

stripe-gradient.js is a JavaScript plugin that renders an animated gradient background on a Canvas element, inspired by Stripe.com.

It's flexible, very easy to customize and is available as a jQuery or JavaScript plugin (no images are required).

How to use it:

1. Create an HTML5 canvas element on which the Stripe Gradient Animation will render.

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

2. Load the stripe-gradient.js library in the document.

<!-- jQuery Is OPTIONAL -->
<script src="/path/to/cdn/jquery.slim.min.js"></script>

<!-- stripe-gradient.js -->
<script src="/path/to/dist/stripe-gradient.js"></script>

3. Initialize the plugin on the canvas element and define an array of colors for the gradient.

// As A Vanilla JS Plugin
new Gradient({
    canvas: '#demo',
    colors: ['#a960ee', '#ff333d', '#90e0ff', '#ffcb57']
});

// As A jQuery Plugin
$('#demo').gradient({
  colors: ['#a960ee', '#ff333d', '#90e0ff', '#ffcb57']
});

4. All default options.

canvas: null,
colors: ['#f00', '#0f0', '#00f'],
wireframe: false,
density: [.06, .16],

angle: 0,
amplitude: 320,
static: false, // Enable non-animating gradient

loadedClass: 'is-loaded',

---

This awesome jQuery plugin is developed by thelevicole. For more Advanced Usages, please check the demo page or visit the official website.