A rainbow gradient animation
Use the new color interpolation to easily create an infinite rainbow animation using CSS gradients 🌈
- One color declaration
- A simple animation
html {
background: repeating-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
- CSS shapes: Polygon & Starburst Use online geneartors to create Polygon and Starburst shapes using clip-path.
- CSS-only gradient shadows Use an online tool to generate your gradient shadow.
- Fancy Rounded frame around your images Combine gradients and CSS mask to create a fancy frame around an image.
- How many elements your container has? Detect the number of elements inside a container using :has() selector.