Background Color Transitions with jQuery and CSS3 - Spectrum

File Size: 97.1 KB
Views Total: 3032
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Background Color Transitions with jQuery and CSS3 - Spectrum

Spectrum is an ultralight (~2kb) jQuery plugin that allows you to apply smooth transition effects on the background color of a specific container using CSS3.

See also:

How to use it:

1. Include jQuery library and the spectrum.js script on your web page.

<script src="//"></script>
<script src="js/jquery.spectrum.js"></script>

2. Create a container with the CSS ID 'spectrumPlugin'.

<header id="spectrumPlugin">
  ... content here ...

3. Call the plugin on the container.


4. Set the initial background color and the color transitions.

header {
  width: 100%;
  height: 100%;
  background-color: #7189FF;
  transition: background-color 4s ease;

5. Change the default colors and transition interval in the jquery.spectrum.js

// Array of Colours
var colourArray = [

// Colour 1 - Orange
      src: 'colour1',
      colour: 'rgb(252,115,49)'

  // Colour 2 - Pink
      src: 'colour2',
      colour: 'rgb(236,0,140)'

  // Colour 3 - Yellow
      src: 'colour3',
      colour: 'rgb(241,196,15)'

  // Colour 4 - Green
      src: 'colour4',
      colour: 'rgb(95,178,106)'

  // Colour 5 - Blue
      src: 'colour5',
      colour: 'rgb(113,137,255)'

//Use set interval to go through our colourArray
//Each interval change the background colour of the element 
//Plugin is on, and increment the index.
setInterval(function() {
  //Change background of selected $element to be 
  //Increment index
  index = index + 1;
  //Make sure that index is not larger than the length of the colourArray
  //If so,

Change log:


  • Refinements, Favicons, & Media Query Edits

This awesome jQuery plugin is developed by andreacrofts. For more Advanced Usages, please check the demo page or visit the official website.