html,

body {

    position: relative;

    width: 100%;

    height: 100%;

    display: flex;

    padding-bottom: 100px;

}

​

div {

    position: absolute;

    top: 0;

    left: 0;

    bottom: 0;

    right: 0;

}

​

div:nth-child(1) {

    background: linear-gradient(

        238deg,

        rgb(130, 255, 0) 0%,

        rgb(0, 84, 166) 100%

    );

    animation: move 20s infinite linear;

}

​

div:nth-child(2) {

    background: linear-gradient(

        238deg,

        rgb(33, 200, 69) 0%,

        rgb(0, 0, 100) 100%

    );

    mix-blend-mode: overlay;

    animation: move 30s infinite linear;

}

​

div:nth-child(3) {

    background: linear-gradient(

        238deg,

        rgb(200, 255, 255) 48%,

        rgb(3, 0, 151) 100%

    );

    mix-blend-mode: multiply;

    animation: move 40s infinite linear;

}

​

div:nth-child(4) {

    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 50s infinite linear;

}

​

div:nth-child(5) {

    background: radial-gradient(

        100% 225% at 0% 100%,

        rgb(255, 0, 0) 0%,

        rgb(66, 255, 0) 100%

    );

    mix-blend-mode: difference;

    animation: move 60s infinite linear;

}

​

div:nth-child(6) {

    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 70s infinite linear;

}

​

@keyframes move {

    0% {

        filter: unset;

    }

​

    100% {

        filter: hue-rotate(360deg);

    }

}

​