CSS gradient generator
Build linear, radial and conic gradients, and see why blending in OKLCH keeps the middle of a gradient from turning grey.
background: linear-gradient(120deg, #2B1B4A 0%, #E6007E 55%, #FFC857 100%);
background: linear-gradient(120deg in oklch, #2B1B4A 0%, #E6007E 55%, #FFC857 100%);sRGB vs OKLCH, side by side
Same stops, two blending methods. Look at the middle of each bar: sRGB averages the red, green and blue numbers, which pulls opposing hues through grey. OKLCH blends lightness, chroma and hue separately, so the middle stays colorful.
Frequently asked questions
How do I make a CSS gradient?
Pick two or more color stops, a type (linear, radial or conic) and an angle. Copy the generated background property into your CSS. Linear gradients go in a straight line at the given angle; radial ones spread out from a point; conic ones sweep around a centre.
What does “in oklch” interpolation do?
Browsers blend gradients in sRGB by default, which makes the middle of, say, a blue-to-yellow gradient go grey. CSS Color 4 lets you write linear-gradient(in oklch, …) so the midpoint keeps its saturation. It works in current Chrome, Edge, Safari and Firefox; the generator also outputs an sRGB fallback line for older browsers.
How many color stops can a gradient have?
CSS has no practical limit. This tool supports up to six stops, which covers almost every design need.