Elvar_Smari Posted March 17, 2023 Share Posted March 17, 2023 I have this css code that animates the background colour of my page. I would like to alter it so that the position of the gradient is randomised every time I reload the page. How can I accomplish that? .section-background { background: linear-gradient(270deg, #8A90F9, #91F2F2, #92F492, #FFB64D, #FF5C5C, #FC92FC); background-size: 10000% 10000%; -webkit-animation: AnimationName 60s ease infinite; -moz-animation: AnimationName 60s ease infinite; animation: AnimationName 60s ease infinite; } @-webkit-keyframes AnimationName { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} } @-moz-keyframes AnimationName { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} } @keyframes AnimationName { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} } } Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment