How to fade the transition between background colors in a div?

Question

How can I fade the transition between background colors in a div ?

I have not been able to do it with my code and I can't find a solution anywhere. Can someone please help me? Thanks for now.

 $(document).ready(function() { var containerColors = [{ "background": "linear-gradient(to top right, #1abc9c, #3498db)" }, { "background": "linear-gradient(to top right, red, blue)" } ]; $("#button").click(function() { var ramdom = Math.floor((Math.random() * 2)); $("#container").css(containerColors[ramdom]); }); }); 

 #container { height: 100vh; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="container" class="container-fluid"> <div class="box"> <button id="button">click</button> </div> </div> 

Answer 1

on your css file you can add:

#container{
    background: linear-gradient(to top right, #1abc9c, #3498db); 
    -moz-transition: background 0.3s ease-in;
    -o-transition: background 0.3s ease-in;
    -webkit-transition: background 0.3s ease-in;
  }

Whenever you change the background color of you background, the transition effect will happend.

You can also try this way:

$(document).ready(function() {
            var containerColors = [
                {"background": "linear-gradient(to top right, #1abc9c, #3498db)"},
                {"background": "linear-gradient(to top right, red, blue)"}
            ];

            $("#button").click(function() {
                var ramdom = Math.floor((Math.random() * 2));
                $("#container").hide();
                $("#container").fadeIn("slow", function(){
                    $("#container").css(containerColors[ramdom]);
                });
            });
        });

I just tested, it worked for me.

Answer 2

Animate the background using linear gradients may not be possible, instead you could do this on your javascript:

$("#button").click(function() {
    $cont = $('#container');
    $cont.fadeOut('slow', function() {
        var ramdom = Math.floor((Math.random() * 2));
        $("#container").css(containerColors[ramdom]);
        $cont.fadeIn();
    });
});

Answer 3

You cannot animate background-gradients .

You could use a pseudo element and play with opacity , but javaScript can only access the DOM which :pseudo element are not, only generated at screen via CSS.

You may end using an extra container dedicated to draw that second gradient your look for and play a fadding on it via opacity :

Exemple

 // quick update of your script $(document).ready(function() { var containerColors = [ {"opacity" : "1"}, {"opacity" : "0"} ]; $("#button").click(function() { var ramdom = Math.floor((Math.random() * 2)); $("#container .bg").css(containerColors[ramdom]); }); }); 

 #container { position: relative; height: 80vh; background: linear-gradient(to top right, red, blue); } #container > .box /* comment: or any direct child if unknown #container > * end comment */ { position: relative; z-index: 1; } #container .bg { background: linear-gradient(to top right, #1abc9c, #3498db); position: absolute; top: 0; bottom: 0; left: 0; right: 0; transition:0.5s; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="container" class="container-fluid"><div class="bg"></div> <div class="box"> <button id="button">click</button> </div> </div>