Animated background css

/*
	use @keyframes and the animation property
	see this code running here: https://codepen.io/hylobates-lar/pen/qBbQeON
*/
html, body {
  width: 100%;
  height:100%;
}

body {
    background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;
}

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

Similar codes

5 votes135 views1 answer
How to create a background-color before image in css
CSS
0 vote249 views1 answer
Index.css code not working in 000webhost
CSS
16 votes228 views1 answer
Css text vertical direction
CSS
12 votes299 views3 answers
Css background image size fit screen
CSS
98 votes222 views2 answers
Css box-shadow shorthand
CSS
3 votes187 views3 answers
How to center a html header
CSS
0 vote177 views1 answer
Target element pseudo-classes
CSS
1 vote182 views1 answer
Sass calculate and concat pixels
CSS
68 votes205 views6 answers
Center position absolute
CSS
0 vote246 views1 answer
L'entente cordiale streaming
CSS