<div id="fond1" class="actif"></div>
    <div id="fond2"></div>
html,body{
    height:100%;
    background:black;
}

body{
    transition:background 2s;
} 

#fond1,#fond2{
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    opacity:0;
    transition:opacity 1500ms;
}

#fond1.actif,#fond2.actif{
    opacity:1;
}
let fond1 = document.querySelector("#fond1");
let fond2 = document.querySelector("#fond2");

function majFond(){

    let c1 = `rgb(${nbAlea(255)},${nbAlea(255)},${nbAlea(255)})`;
    let c2 = `rgb(${nbAlea(255)},${nbAlea(255)},${nbAlea(255)})`;

    if(fond1.classList.contains("actif")){
        fond2.style.background=`linear-gradient(to right,${c1},${c2})`;
        fond1.classList.remove("actif");
        fond2.classList.add("actif");
    }else{
        fond1.style.background=`linear-gradient(to right,${c1},${c2})`;
        fond1.classList.add("actif");
        fond2.classList.remove("actif");
    }

}

majFond();

setInterval(majFond,2000);

function nbAlea(max,min=0){
    let delta = max-min;
    return min+Math.round(Math.random()*delta);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.