CSS gradient transition_in javascript
using jquery:

html

&lt;div class="gradient one"&gt;&lt;/div&gt;
&lt;div class="gradient two"&gt;&lt;/div&gt;


css

html { background-color: #B94FC1; } 
body { margin:0; }
.gradient { content: ""; height: 100%; width: 100%; position: fixed; z-index: -6; }
.gradient.one { background-image: linear-gradient(to bottom, #5856D6 0%, #C644FC 100%);}
.gradient.two { background-image: linear-gradient(to bottom, #C643FC 0%, #FF5F37 100%); display:none; }


javascript

$(function() {
    fadeToggle( $('.gradient.one') );
    fadeToggle( $('.gradient.two') );
});

function fadeToggle(el) {
    el.fadeToggle(5000,null,function() { fadeToggle(el); });
}


fiddle: http://jsfiddle.net/aMVBk/2/