CSS Tip

A rainbow gradient animation

January 31, 2023

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

One color declaration
A simple animation

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.

More CSS Tips