JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <div id="original">ORIGINAL</div>
    <div id="ajuda">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 5s;
}
#ajuda {
    opacity: 0;
    z-index: 100;
}
.reset {
    transition: none !important;
}

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'),
        ajuda = document.getElementById('ajuda'),
        a = getRandomColor(),
        b = getRandomColor();

    ajuda.style.backgroundImage = 'linear-gradient(to right, ' + a + ', ' + b + ')';
    ajuda.style.opacity = 1;

    setTimeout(function () {
        original.style.backgroundImage = 'linear-gradient(to right, ' + a + ', ' + b + ')';
        var subst = ajuda.cloneNode(true);
        subst.classList.add('reset');
        ajuda.parentNode.replaceChild(subst, ajuda);
        ajuda = subst;
        ajuda.style.opacity = 0;
        ajuda.classList.remove('reset');

    }, 5200);
}
setInterval(colorir, 5300);
colorir();