html, body {

    position: relative;

    width: 100%;

    height: 100%;

    display: flex;

    padding-bottom: 100px;

}

​

div {

    position: absolute;

    top: 100px;

    left: 30px;

    width: 240px;

    height: 240px;

    border: 2px solid #999;

    margin: auto;

}

​

div:nth-child(1) {

    background: linear-gradient(

        238deg,

        rgb(130, 255, 0) 0%,

        rgb(0, 84, 166) 100%

    );

    animation: move 12s infinite linear;

}

​

div:nth-child(2) {

    transform: translate(300px, 0);

    background: linear-gradient(238deg, rgb(33, 200, 69) 0%, rgb(0, 0, 100) 100%);

    mix-blend-mode: overlay;

    animation: move 6s infinite linear;

}

​

div:nth-child(3) {

    transform: translate(600px, 0);

    background: linear-gradient(238deg, rgb(200, 255, 255) 48%, rgb(3, 0, 151) 100%);

    mix-blend-mode: multiply;

    animation: move 6s infinite linear;

}

​

div:nth-child(4) {

    transform: translate(900px, 0);

    background: radial-gradient(

        100% 85% at 0% 100%,

        rgb(0, 0, 0) 0%,

        rgb(0, 131, 255) 50%,

        rgb(255, 0, 0) 100%

    );

    mix-blend-mode: difference;

    animation: move 6s infinite linear;

}

​

div:nth-child(5) {

    transform: translate(1200px, 0);

    background: radial-gradient(

        100% 225% at 0% 100%,

        rgb(255, 0, 0) 0%,

        rgb(66, 255, 0) 100%

    );

    mix-blend-mode: difference;

    animation: move 6s infinite linear;

}

​

div:nth-child(6) {

    transform: translate(1500px, 0);

    background: radial-gradient(

        100% 140% at 100% 0%,

        rgb(0, 134, 62) 0%,

        rgb(0, 239, 255) 50%,

        rgb(0, 113, 186) 100%

    );

    mix-blend-mode: overlay;

    animation: move 6s infinite linear;

}

​

@keyframes move {

    50% {

        transform: translate(0, 0);

    }

    100% {

        transform: translate(0, 0);

    }

}