sRGB vs OKLCH blending
The same two colors, blended the default way and in OKLCH:
/* top */ background-image: linear-gradient(90deg, #2563eb, #facc15);
/* bottom */ background-image: linear-gradient(90deg in oklch, #2563eb, #facc15);Gradient recipes
/* Fade an image to transparent at the bottom */
.hero { mask-image: linear-gradient(black 60%, transparent); }
/* Gradient text */
.title { background: linear-gradient(90deg in oklch, #6366f1, #ec4899); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* Pie chart: 40% / 35% / 25% */
.pie { border-radius: 50%; background: conic-gradient(#3b82f6 0 40%, #f59e0b 0 75%, #10b981 0); }Picking colors? The color converter gives OKLCH values for any color, and the contrast checker tells you whether text stays readable on top of the gradient.
Frequently asked questions
What is OKLCH blending, and why use it?
By default browsers blend gradient colors in sRGB, which takes a straight line through RGB space. Between colors on opposite sides of the color wheel, like blue and yellow, that line passes through grey, so the middle looks muddy. Blending in OKLCH keeps lightness and saturation steady and travels around the hue wheel, giving vivid, even transitions. OKLab is a middle ground that avoids grey but doesn’t change hue as much.
Which browsers support “in oklch”?
Chrome and Edge 111+, Safari 16.2+ and Firefox 127+. Older browsers ignore the whole declaration, so the tool outputs an sRGB version first as a fallback: browsers that understand the second line use it, and others keep the first.
How do I make hard color stops or stripes?
Give two stops the same position: red 50%, blue 50% switches color instantly with no blend. Repeat a short pattern with repeating-linear-gradient for stripes; the “Stripes” preset shows warning tape at 45°.
Linear, radial or conic?
Linear gradients change along a straight line at an angle; 0deg goes upward and 90deg to the right. Radial gradients spread out from a center point as a circle or an ellipse. Conic gradients sweep around a center point like a clock hand, which is what you need for color wheels and pie charts.
Why does my gradient show visible bands?
Long, subtle gradients between similar dark colors have too few distinct 8-bit colors to fill the space, so steps become visible. Shorten the gradient, increase the contrast between stops, blend in OKLCH, or add a little noise texture on top to hide the bands.