Form · T-09
Gradient generator
Choose your colours, slide them into place and copy the CSS. Mixing in OKLCH keeps the in-between colours bright, even between blue and yellow.
Your files stay on your device
Questions
Good to know
What does mixing in OKLCH do?
An ordinary gradient mixes red, green and blue directly, and between blue and yellow you then get a grey stripe. In OKLCH the hue travels around the colour wheel, so the middle stays bright.
Does this work in every browser?
Browsers from 2023 onwards understand in oklch. For older browsers Kleurstaal adds a line above it with in-between colours already calculated in OKLCH here, so it looks almost the same.
How do I get a hard edge?
Put two colours at the same position, for example blue at 50 and yellow at 50. The gradient then jumps from one colour to the other at that point.
How it works
Gradient generator in three steps
Choose the shape
Linear with an angle, radial as a circle or ellipse, or conic around a point.
Set the colours
Two to eight colours, each at a position from 0 to 100 percent.
Copy the CSS
With a fallback line for older browsers at the top. Paste it under background.