CSS Gradient Fixer

Why?

As is tradition, CSS does colour interpolation totally wrong. This article does a good job of explaining why.

CSS Color Module Level 4 will hopefully save us from this mess, by offering colour interpolation in CIELAB space, among other niceties. In the meantime, this tool can be used as a workaround to get prettier gradients.

In fact, we can do slightly better than CIELAB, with Oklab.

How?

It's quite simple - we add extra colourstops to the gradient, with correctly interpolated color values. The more we add, the closer we get to our intended gradient.

My gradient string parsing code is a bit fragile (PRs welcome). It only works for inputs that match the pattern [colour 0] [percentage 0], ..., [colour n] [percentage n]


Input CSS:

Interpolation type:

Extra Colour Stops:

How the CSS spec says it looks (native CSS rendering)

How it should really look (canvas rendering with proper interpolation)

How our improved CSS looks (native CSS rendering)

Output CSS:


Future Ideas: