JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <div id="original"></div>
    <div id="ajuda"></div>
</div>

CSS

div div {
    width: 500px;
    height: 500px;
    background: linear-gradient(to right, #3e42e4, #e53472);
    position: absolute;
    left: 0;
    top: 0;
    transition: opacity 10s;
}
#ajuda {
    opacity: 0;
    z-index: 100;
}
.reset {
    transition: none;
    opacity: 0;
}

JavaScript

function getRandomColor() {
    var letters = '0123456789ABCDEF'.split('');
    var color = '#';
    for (var i = 0; i < 6; i++) {
        color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
}

function colorir() {
    var original = document.getElementById('original');
    var ajuda = document.getElementById('ajuda');
    var a = getRandomColor(),
        b = getRandomColor();
    ajuda.style.backgroundImage = 'linear-gradient(to right, ' + a + ', ' + b + ')';
    ajuda.classList.remove('reset');
    ajuda.style.opacity = 1;
    setTimeout(function () {
        original.style.backgroundImage = 'linear-gradient(to right, ' + a + ', ' + b + ')';
        ajuda.classList.add('reset');
        ajuda.style.opacity = 0;
    }, 10100);
}
setInterval(colorir, 10500);
colorir();