CSS Tip

A rainbow gradient animation

Use the new color interpolation to easily create an infinite rainbow animation using CSS gradients 🌈

html {
  background: 
    linear-gradient(90deg in hsl longer hue, red 0 50%) 0/200%;
  animation: r 6s linear infinite;
}
@keyframes r {
  to {background-position: 100%}
}

See the Pen rainbow gradient animation by Temani Afif (@t_afif) on CodePen.