body {
    margin: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #222;
}

.box {
    font-size: 40px;
    width: 10em;
    height: 5em;
    background-color: #111;
    color: lime;
    border-radius: 0.5em;
    text-align: center;
    line-height: 1.5em;
    font-family: sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    animation: animate_text 2s infinite alternate;
}

.box::before {
    content: '';
    position: absolute;
    width: calc(100% + 1em);
    height: calc(100% + 1em);
    border-radius: inherit;
    z-index: -1;
    background-image: linear-gradient(
        60deg,
        aquamarine,
        cornflowerblue,
        goldenrod,
        hotpink,
        salmon,
        lightgreen,
        sandybrown,
        violet);
    background-size: 300%;
    background-position: 0%, 50%;
    animation: animate_bg 2.5s infinite alternate;
}

@keyframes animate_bg {
    to {
        background-position: 100%, 50%;
    }
}

@keyframes animate_text {
    to {
        color: yellow;
    }
}