jQuery Gradient Animations Plugin


The jQuery Gradient Animations Plugin is a simple plugin for allowing you to animate Css3 linear and radial gradients.


Reporting Bugs

If you find any bugs please don’t comment on this page. Report any bugs through Github.


The jQuery Gradient Animations Plugin uses two other plugins:

  • jQuery gradient cssHook. This allows you to use the W3C way of setting gradients for browsers that support it( e.g. Moz, Webkit,  Opera).
  • jQuery Color v2 beta. This allows the plugin to work with colours if different formats (name, rgb, rgba, hsl, hsla).

Both these files come with the download anyway.


Current Version – 1.0


Download jQuery Gradient Animations v1.0

Github Page



.animateGradient(css, speed)
.animateGradient(css, speed, complete)

css - Gradient you want to animate too. Must be a W3C gradient.
speed - How fast you want the animation to happen, in milliseconds.
        Defaults to 1000.
complete - A function to call once the animation has completed.

Basic Example

    $('#elem').animateGradient('linear-gradient(red, blue)');

Advanced Example

$(document.ready(function() {
    $('#elem').animateGradient('linear-gradient(red, blue)', 400, function(){

Simple as that!

This entry was posted in Projects. Bookmark the permalink.

Comments are closed.