Can I animate the change of a background gradient?

Question

I'm trying to make the gradient fade in as the background color.

$('body').animate({
  background: '-webkit-gradient(linear,left top,left bottom,from(#b0c4ff),to(#6289ff)) fixed)'
}, 2000, function(){});

http://jsfiddle.net/myLf9o0j/3/

jQuery animate backgroundColor

Animation in css with gradient colors

You want it to fade in from white? Or do you want it to fade from color to color? If you want it to fade in to white, just animate the element opacity and make sure it has a white element behind it (usually body) — ntgCleaner, Oct 10 '14 at 16:13
You should be able to use https://github.com/jquery/jquery-color/. I haven't played with gradients though — ntgCleaner, Oct 10 '14 at 16:19

GramThanos · Accepted Answer · 2015-03-06T02:24:10.223

Make a full page div and add it on the background behind all other elements. Then you can make it animate.

Check the code below:

function goodMorning(){
 $('#background').animate({
            opacity: 1
 }, 2000);
}

goodMorning();

body{
    background-color: red;
}
#background{
    opacity: 0;
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    z-index: -1;
    background: -webkit-gradient(linear,left top,left bottom,from(#b0c4ff),to(#6289ff)) fixed;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="background"></div>
<p>Hello :)</p>

Can I animate the change of a background gradient?

1 Answers1