Skip to content
Branch: master
Go to file

Latest commit


Failed to load latest commit information.
Latest commit message
Commit time

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
You can’t perform that action at this time.