Why does the CSS list nine colours?

Because a browser blends in sRGB whatever you give it. Writing the middle out explicitly is the only way to make every browser follow the OKLab path, rather than only the newest ones that understand a colour space hint.

When does sRGB look wrong?

Whenever the two colours are far apart in hue, especially opposite ones like blue and yellow or red and green. Two shades of the same colour look nearly identical either way.

Can I use more than two colours?

Not here yet. For now, generate two gradients and join the CSS by hand, or place the middle colour as the end of one and the start of the next.

Colour

CSS gradient generator

Build a gradient that stays colourful in the middle.

From

Angle: 90°

Blend through

OKLab — even, keeps its coloursRGB — what CSS does by default

Nine stops are written out rather than two, so every browser follows the same path instead of blending in sRGB on its own.

CSS

background: linear-gradient(90deg, #f27d14, #d7783f, #bc7354, #a26c63, #88656e, #6e5c77, #54537e, #3a4885, #1e3a8a);

Blend blue into yellow the ordinary way and the middle turns muddy grey, because a straight line between them in RGB dips out of the colourful part of the space. Blending through OKLab bends around that. Both versions are shown side by side, so the difference is something you can see rather than take on trust.

How to use it

Pick the two colours.
Set the angle and compare the two blends.
Copy the CSS.

Why use this tool

Completely private

Everything runs inside your browser. Your files and text are never sent to a server.

Free, with no limits

No sign-up, no watermarks and no cap on how many times you can use it.

Instant results

There is no upload or queue to wait for, so results appear as fast as your device can work.

Works on any device

Runs in any modern browser on phone, tablet or desktop. Nothing to install.

Frequently asked questions

Why does the CSS list nine colours?: Because a browser blends in sRGB whatever you give it. Writing the middle out explicitly is the only way to make every browser follow the OKLab path, rather than only the newest ones that understand a colour space hint.
When does sRGB look wrong?: Whenever the two colours are far apart in hue, especially opposite ones like blue and yellow or red and green. Two shades of the same colour look nearly identical either way.
Can I use more than two colours?: Not here yet. For now, generate two gradients and join the CSS by hand, or place the middle colour as the end of one and the start of the next.