A jQuery plugin for automatic color rotation in various CSS properties
JavaScript HTML CSS
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.


color-rotator Built with Grunt

This plugin uses CSS3 transitions to smoothly animate various CSS color properties (i.e. background color, text color, shadow color etc.) subject to a delay. Given a list of colors (in any format acceptible to CSS), the plugin will transition between the colors once or infinitely many times, depending on the settings.

Basic Example

  colors: ['#3498db','#2980b9','#2ecc71','#27ae60'],
  property: 'background',
  easing: 'linear',
  random: true,
  delay: 500 // In milliseconds

Available Options

colors [array|object]

The color option takes an array of colors in any type supported by CSS (Hex, RGB, RGBA, HSL, HSLA or predefined names), or an object specifying a range.

// Colors array
    colors: ['#1abc9c','#16a085','#2ecc71','#27ae60'],
    property: 'background'

// Color range
    colors: {

        // Only RGB and hexadecimal colors are 
        // supported here
        from: 'rgb(52, 152, 219)',
        to: 'rgb(211, 84, 0)',

        // The number of colors to generate 
        // within the given range
        count: 16 
    property: 'background'

property [string]

The property option takes a string with one or more properties, separated by space. The color of the given property will change according to the given colors. Supported properties:

  • background - Changes the background color
  • shadow - Changes the box-shadow color
  • text - Changes the font color
    colors: [...],
    property: 'background text'

delay [number]

The delay option represents the number of milliseconds between each transition.

    colors: [...],
    delay: 1200

random [boolean]

The random option takes a boolean value. If random is set to true, the colors will be picked randomly from the color pool.

    colors: [...],
    random: true

easing [string]

The easing option takes a string with one of the CSS3 supported easing functions (see transition-timinig-function).

    colors: [...],
    easing: 'linear'

Available Methods


Continues the color rotation if it was stopped.



Stops the color rotation.



Updates the options with new values.

$('#element').colorRotator('update', {/* new options */});


Calls a function that takes the colors array as an argument.

    // Do something with the 'colors' array