Creating Animated Background with Random Gradient Transitions using jQuery

In this post we're going to create a modern animated background with random gradient transitions built with CSS3 and Javascript (jQuery).

See also:

• Create An Animated Radial Gradient Background With jQuery and CSS3
• jQuery Plugin For Multi-layered Gradient Background with CSS3 - Shards
• Gradient Color Background Plugin For jQuery - Add Shine

How to use it:

1. Create two DIV containers for the animation background.

<div class="bg"></div>
<div class="bg hidden"></div>

2. The CSS/CSS3 styles.

html,
body {
  margin: 0;
  height: 100%;
  position: relative;
}

.bg {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-transition: opacity 5s;
  -moz-transition: opacity 5s;
  transition: opacity 5s;
}

.hidden { opacity: 0; }

3. Include the jQuery library at the bottom of the web page.

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

4. The core Javascript to create random gradient transitions.

function newGradient() {
  var c1 = {
    r: Math.floor(Math.random()*255),
    g: Math.floor(Math.random()*255),
    b: Math.floor(Math.random()*255)
  };
  var c2 = {
    r: Math.floor(Math.random()*255),
    g: Math.floor(Math.random()*255),
    b: Math.floor(Math.random()*255)
  };
  c1.rgb = 'rgb('+c1.r+','+c1.g+','+c1.b+')';
  c2.rgb = 'rgb('+c2.r+','+c2.g+','+c2.b+')';
  return 'radial-gradient(at top left, '+c1.rgb+', '+c2.rgb+')';
}

function rollBg() {
  $('.bg.hidden').css('background', newGradient());
  $('.bg').toggleClass('hidden');
}

5. Call the plugin and set the interval for the transitions.

$(document).ready(function() {
  rollBg();
  setInterval(rollBg, 5000);
});

---

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