Create An Animated Radial Gradient Background With jQuery and CSS3

A lightweight jQuery script that creates an animated radial gradient background from an array of pre-defined colors.

See Also:

• Online CSS Gradient Generator

How to use it:

1. Include the latest version of jQuery library in the head section of your web page.

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

2. Create two container elements for the animated gradient background.

<div id="gradient2"></div>
<div id="gradient"></div>

3. The CSS/CSS3 to set the initial gradient background.

#gradient {
  position: absolute;
  width: 100%;
  height: 100%;
  padding: 0px;
  margin: 0px;
  z-index: 10;
}

#gradient2 {
  position: absolute;
  width: 100%;
  height: 100%;
  padding: 0px;
  margin: 0px;
  z-index: 3;
  background-image: -webkit-radial-gradient(80% 10%, circle, rgb(27,186,135), transparent),  -webkit-radial-gradient(80% 50%, circle, rgb(58,164,178), transparent),  -webkit-radial-gradient(20% 80%, 40em 40em, rgb(14,4,56), transparent),  -webkit-radial-gradient(10% 10%, circle, rgb(68,242,215), transparent);
}

4. The Javascript to enable the animated gradient background.

<script>
$( document ).ready(function() {
var colors = new Array(
  [230,105,147],
  [58,164,178],
  [40,26,88],
  [232,24,122]);

var step = 0;
//color table indices for: 
// current color left
// next color left
// current color right
// next color right
var colorIndices = [0,1,2,3];

//transition speed
var gradientSpeed = 0.002;

function updateGradient() {
  var c0_0 = colors[colorIndices[0]];
  var c0_1 = colors[colorIndices[1]];
  var c1_0 = colors[colorIndices[2]];
  var c1_1 = colors[colorIndices[3]];

  var istep = 1 - step;
  var r1 = Math.round(istep * c0_0[0] + step * c0_1[0]);
  var g1 = Math.round(istep * c0_0[1] + step * c0_1[1]);
  var b1 = Math.round(istep * c0_0[2] + step * c0_1[2]);
  var color1 = "#"+((r1 << 16) | (g1 << 8) | b1).toString(16);

  var r2 = Math.round(istep * c1_0[0] + step * c1_1[0]);
  var g2 = Math.round(istep * c1_0[1] + step * c1_1[1]);
  var b2 = Math.round(istep * c1_0[2] + step * c1_1[2]);
  var color2 = "#"+((r2 << 16) | (g2 << 8) | b2).toString(16);

$('#gradient').css({background: "-webkit-radial-gradient(80% 10%, circle, "+color1+", transparent), -webkit-radial-gradient(80% 50%, circle, "+color2+", transparent)"});

step += gradientSpeed;
if ( step >= 1 )
{
  step %= 1;
  colorIndices[0] = colorIndices[1];
  colorIndices[2] = colorIndices[3];
  
  //pick two new target color indices
  //do not pick the same as the current one
  colorIndices[1] = ( colorIndices[1] + Math.floor( 1 + Math.random() * (colors.length - 1))) % colors.length;
  colorIndices[3] = ( colorIndices[3] + Math.floor( 1 + Math.random() * (colors.length - 1))) % colors.length;
  
}
} setInterval(updateGradient,10);
});
</script>

---

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