An OKLCH linear gradient, copied as CSS code.
▸ More about
Uses of OKLCH CSS gradient
- Copying an OKLCH linear gradient into a stylesheet.
- Checking whether blue to yellow goes muddy in sRGB.
- Sampling hex stops when a browser does not interpolate in OKLCH.
OKLCH CSS gradient pitfalls
- Copying an sRGB blend when the middle has gone gray.
- Assuming the hex samples are the declaration to paste.
- Uploading stops to a generator that stores them.
OKLCH CSS gradient questions (6)
What is an OKLCH CSS gradient?
An OKLCH CSS gradient blends two stops in a space where lightness and chroma stay even. The copied line is linear-gradient, to the right, in oklch, then the two hex stops. Blue #0000ff to yellow #ffff00 is the pair that opens the page.
How do I copy linear gradient CSS code?
Copy CSS puts the OKLCH declaration on the clipboard. That line is the one to paste into a stylesheet. The row of hex samples under the strip is a fallback, not the declaration.
Why does an sRGB blend go gray in the middle?
Red, green, and blue channels do not track how bright a color looks. Blue and yellow meet in the middle as a grayish mix in sRGB. OKLCH keeps the chroma up, so the same pair stays colored through the middle.
What is the difference between an OKLCH gradient and an sRGB gradient?
The difference between an OKLCH gradient and an sRGB gradient is which numbers get blended. OKLCH blends lightness, chroma, and hue. sRGB blends the red, green, and blue channels, and that is the mix that goes gray.
Does this upload my color stops?
No. The two stops stay in the page. Uploading stops to a generator that stores them is a different product. Nothing here is sent off the device.
Can the copied CSS live in a stylesheet?
Yes. Paste the copied line as a background value. Browsers that understand "in oklch" interpolate the stops themselves. The sampled hex row is there for a browser that does not.