Animated Gradient Background CSS only

animated-gradient-css-only

 
    body {
        background: linear-gradient(-45deg, #8D298A, #F26C25, #F26C25, #8D298A);
        background-size: 400% 400%;
        -webkit-animation: gradient 15s ease infinite;
        animation: gradient 15s ease infinite;
    }

    @-webkit-keyframes gradient {
        0% {
            background-position: 0% 50%;
        }
        50% {
            background-position: 100% 50%;
        }
        100% {
            background-position: 0% 50%;
        }
    }

    @keyframes gradient {
        0% {
            background-position: 0% 50%;
        }
        50% {
            background-position: 100% 50%;
        }
        100% {
            background-position: 0% 50%;
        }
    }