A little while ago, I was trying to animate an element’s background color, so that it cycled through the rainbow. Seems easy, but it turns out, browsers have a surprisingly big limitation when it comes to color processing! In this tutorial, we’ll dig into the issue, and I’ll share a couple of strategies you can use to work around this limitation.

Josh W. Comeau's platform provides resources in frontend development, React.js, and CSS, offering insightful articles, tutorials, and code examples. With a focus on accessible and creative web development techniques, Josh W. Comeau empowers developers to craft engaging user experiences and solve complex problems in the world of web development.

Josh W Comeau

Explores the challenges of animating color transitions in CSS, revealing that browsers perform color interpolation in RGB space even when colors are specified in HSL, causing unwanted gray intermediate colors. Demonstrates how CSS filters, specifically hue-rotate(), provide a superior solution for smooth color shifting animations. Includes practical techniques for creating particle effects with dynamic color transitions and twinkling animations.

Color Shifting in CSS • Josh W. Comeau

Link to this heading Shifting between colors

Link to this heading CSS filters to the rescue!

Link to this heading Whimsical Animations

I constantly seem to be working on exactly what you write about. I am currently working on an animation-editor and CSS variables while building on Nordcraft.
The more I work on declared CSS variables, the more I feel like they are what we should aim to animate instead of properties directly. The browser CSSOM are crazy optimized for it as well. Just to your last point, as I do actually feel it is the right solution. Modifying primitives let you control your animations much more precisely when you need to, like in your example.

Looks really interesting.
Tuned up for the launch.
Really dope animations!!

Josh’s blog posts are just the best.