CSS rainbow gradient loop animation

user_13233164 0
Viewed 1780

Is trying to find a way to create CSS rainbow stripe animation loop... something similar to this:

rainbow color loop

Currently only able to create an image of the rainbow stripe but now sure how to create an animation that is continuous just like in the gif with CSS.

background: linear-gradient(-45deg, rgba(255,0,0,1) 0%, rgba(255,154,0,1) 10%, rgba(208,222,33,1) 20%, rgba(79,220,74,1) 30%, rgba(63,218,216,1) 40%, rgba(47,201,226,1) 50%, rgba(28,127,238,1) 60%, rgba(95,21,242,1) 70%, rgba(186,12,248,1) 80%, rgba(251,7,217,1) 90%, rgba(255,0,0,1) 100%);

The image: enter image description here

Thanks for reading.

linear-gradients colors css
1 Answers

You can try like below:

html {
  min-height:100%;
  background: 
   linear-gradient(rgba(255,0,0,1) 0%, rgba(255,154,0,1) 10%, rgba(208,222,33,1) 20%, rgba(79,220,74,1) 30%, rgba(63,218,216,1) 40%, rgba(47,201,226,1) 50%, rgba(28,127,238,1) 60%, rgba(95,21,242,1) 70%, rgba(186,12,248,1) 80%, rgba(251,7,217,1) 90%, rgba(255,0,0,1) 100%) 
   0 0/100% 200%;
   animation: a 2s linear infinite;
}

@keyframes a {
  to {background-position:0 -200%}
}

user_86203330
Related