ColorRotator.js is a jQuery plugin that 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 acceptable to CSS), the plugin will transition between the colors once or infinitely many times, depending on the settings.
Here are a few example of what you can do with it:

Background Color

Shadow Color

Text Color

Hello, World!

Navigation Example

Different hover effect every time!

Color Range Example


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'


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

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


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


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'


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

    colors: [...],
    delay: 1200


There are a few methods that can be called after the initial colorRotator() call:

  • 'stop' - Stops the color rotation
  • 'start' - Continues the color rotation if it was stopped
  • 'update' - Updates the options with new values
  • 'colors' - Calls a function that takes the colors array as an argument

// Stop the color rotation

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

// Get the colors array
    // Do something with the 'colors' array

Spread the word about ColorRotator.js!