RSS FeedTwitterMastodonBlueskyShare IconHeart IconGithub IconArrow IconClock IconGUI Challenges IconHome IconNote IconBlog IconCSS IconJS IconHTML IconShows IconGit IconSpeaking IconTools Icon
A gradient from blue to purple is shown represented 4 ways, shorter, longer, increasing and decreasing.
My google avatar.

Gradient hue interpolation

2 min read
css

When a gradient needs to transition from one color to the next, it takes the shortest route it can. But what if the result of that stinks?

Hue interpolation #

That's where new CSS gradient syntax from Color 4 for hue interpolation comes in. Here I specify the gradient takes the longer route:

.gradient-with-hue-interpolation-specified {
  background: linear-gradient(
    to right in hsl longer hue, 
    oklch(63% 0.3 317), 
    oklch(63% 0.2 255)
  );
}

It's almost like the browser has been Zoolander this whole time, it would only turn right 😂

Here's 2 demo's that use ColorJS to help illustrate the effects of this hue interpolation choice. Aka, demo's that help the browser turn left hehe.

Blue to Purple example #

A soft intro example into the topic:

Interactive demo #

This one let's you pick the colors and number of steps:

So so many more color tools coming to the browser!

Mentions #

Join the conversation on

83 likes
9 reposts
  • David
  • Maurício '𝘱𝘢𝘳𝘰𝘥𝘺' 🐧
  • Diego🛸
  • Juk
  • Zimmer
  • Alena Nikolaeva ✨
  • Articulated Dev
  • Bjoern Sellnau
  • Adam Josefus 🧉

Crawl the CSS Webring?

previous sitenext site
a random site