#Gradient.js Supported features:

• Transition duration
• Frames per second (FPS)
• Unlimited count of colors
• Gradient direction
• Hex color code
• Easing

Not supported:

• Different count of colors (between start gradient and target)
• Works only with linear-gradient

Usage

element.gradientTransition(gradientString, duration, fps, easingFn);

Example:

var button = $('#button');
var targetGradientString = 'linear-gradient(to right top, rgb(247, 91, 52) 0%, rgb(240, 233, 93) 25%, rgb(43, 245, 12) 50%, rgb(24, 85, 240) 75%, rgb(166, 39, 230) 100%)';
var targetElement = $('#target');

button.click( function() {
  targetElement.gradientTransition(targetGradientString, 1500, 60, 'easeInOutQuad');
} );

Easing functions:

• linear
• easeInQuad
• easeOutQuad
• easeInOutQuad
• easeInCubic
• easeOutCubic
• easeInOutCubic
• easeInQuart
• easeOutQuart
• easeInOutQuart
• easeInQuint
• easeOutQuint
• easeInOutQuint

Demo site usage

• Click 'random'