{
  "$type": "site.standard.document",
  "description": "Tell the browser to take a different route when building gradient steps.",
  "path": "/gradients-going-the-shorter-longer-increasing-or-decreasing-route",
  "publishedAt": "2022-12-29T21:48:22.970Z",
  "site": "at://did:plc:jnj7wcwuvspxdsipmecmx7rs/site.standard.publication/self",
  "tags": [
    "blog",
    "css"
  ],
  "textContent": "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: See the Pen by Adam Argyle ( @argyleink ) on CodePen . Interactive demo # This one let's you pick the colors and number of steps: See the Pen by Adam Argyle ( @argyleink ) on CodePen . So so many more color tools coming to the browser!",
  "title": "Gradient hue interpolation"
}