--- title: Color Shifting in CSS • Josh W. Comeau | daily.dev description: Explores the challenges of animating color transitions in CSS, revealing that browsers perform color interpolation in RGB space even when colors are specified... canonical: https://daily.dev/posts/color-shifting-in-css-josh-w-comeau-jsib5o36m twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: Color Shifting in CSS • Josh W. Comeau | daily.dev og:description: Explores the challenges of animating color transitions in CSS, revealing that browsers perform color interpolation in RGB space even when colors are specified... og:url: https://daily.dev/posts/color-shifting-in-css-josh-w-comeau-jsib5o36m og:image: https://api.daily.dev/og/posts/JsIb5O36M.png og:image:alt: Color Shifting in CSS • Josh W. Comeau og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # Color Shifting in CSS • Josh W. Comeau **[Josh W Comeau](https://daily.dev/sources/joshwcomeau)** · 9 min read · 202 upvotes · 4 comments ## Summary 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. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Community discussion Top comments from developers on daily.dev. **@jakecake** · 2 upvotes > 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. **@buildwithrishi** · 2 upvotes > Looks really interesting. > Tuned up for the launch. > Really dope animations!! **@alextrost** · 0 upvotes > Josh's blog posts are just the best. **@witcheer** · 0 upvotes > the website is amazing wtf --- Tags: [#webdev](https://daily.dev/tags/webdev), [#javascript](https://daily.dev/tags/javascript), [#css](https://daily.dev/tags/css), [#frontend](https://daily.dev/tags/frontend) [View this post on daily.dev](https://daily.dev/posts/color-shifting-in-css-josh-w-comeau-jsib5o36m) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"Color Shifting in CSS • Josh W. Comeau","url":"https://daily.dev/posts/color-shifting-in-css-josh-w-comeau-jsib5o36m","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/color-shifting-in-css-josh-w-comeau-jsib5o36m"},"datePublished":"2025-09-08T19:29:50.667Z","dateModified":"2025-09-08T19:30:51.150Z","description":"Explores the challenges of animating color transitions in CSS, revealing that browsers perform color interpolation in RGB space even when colors are specified...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/91d9fd9867ce7533eb05e74e30c9dd50?_a=AQAEulh","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/91d9fd9867ce7533eb05e74e30c9dd50?_a=AQAEulh","isAccessibleForFree":true,"articleSection":"Josh W Comeau","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"Josh W Comeau","logo":"https://media.daily.dev/image/upload/t_logo,f_auto/v1/logos/4a121572d03c40a2bff9e8ed0f0792b5","url":"https://daily.dev/sources/joshwcomeau"},"commentCount":4,"discussionUrl":"https://daily.dev/posts/color-shifting-in-css-josh-w-comeau-jsib5o36m","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":202},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":4}],"keywords":"webdev,javascript,css,frontend","timeRequired":"PT9M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Josh W Comeau","item":"https://daily.dev/sources/joshwcomeau"},{"@type":"ListItem","position":3,"name":"Color Shifting in CSS • Josh W. Comeau"}]} {"@context":"https://schema.org","@type":"WebPage","@id":"https://daily.dev/posts/color-shifting-in-css-josh-w-comeau-jsib5o36m","comment":[{"@type":"Comment","text":"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.\nThe 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.","datePublished":"2025-09-09T16:43:33.063Z","url":"https://daily.dev/posts/JsIb5O36M#c-8LXIY0tHF","author":{"@type":"Person","name":"Jacob Kofoed","url":"https://daily.dev/jakecake","image":"https://avatars.githubusercontent.com/u/4046799?v=4"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":2}},{"@type":"Comment","text":"Looks really interesting.\nTuned up for the launch.\nReally dope animations!!","datePublished":"2025-09-09T12:28:16.905Z","url":"https://daily.dev/posts/JsIb5O36M#c-llH02vEob","author":{"@type":"Person","name":"Rishi Bajpai","url":"https://daily.dev/buildwithrishi","image":"https://media.daily.dev/image/upload/s--hPKV7mlb--/f_auto/v1755770670/avatars/avatar_d1XqqlLWRnUyvYXGXqxUV?_a=BAMClqZW0"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":2}},{"@type":"Comment","text":"Josh’s blog posts are just the best.","datePublished":"2025-10-27T23:26:24.359Z","url":"https://daily.dev/posts/JsIb5O36M#c-KuaLg5bwD","author":{"@type":"Person","name":"Alex Trost","url":"https://daily.dev/alextrost","image":"https://avatars.githubusercontent.com/u/19617280?v=4"}},{"@type":"Comment","text":"the website is amazing wtf","datePublished":"2025-09-18T13:11:28.444Z","url":"https://daily.dev/posts/JsIb5O36M#c-YAYk5tMaP","author":{"@type":"Person","name":"witcheer","url":"https://daily.dev/witcheer","image":"https://avatars.githubusercontent.com/u/208820874?v=4"}}]} ```