Gradient Generator
Drag stops on the bar, click it to add more, and copy the CSS. Switch on OKLCH blending for gradients without the muddy middle.
Your browser doesn't support in oklch yet, so the preview shows the sRGB fallback. The copied CSS still includes both.
Linear, radial and conic
Linear gradients blend along a straight line at the angle you set (0° points up, 90° 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 — useful for pie charts, color wheels and spinners.
Each stop is a color and a position. Two stops at the same position make a hard edge, which is handy for stripes and progress bars.
Why blend in OKLCH?
By default browsers mix gradient colors in sRGB, which is why blue-to-yellow passes through a dull gray. Adding in oklch tells the browser to mix in a perceptual color space instead, so the middle stays bright and colorful. Try the “Blue to yellow” preset with the option on and off to see the difference. The copied CSS keeps a plain sRGB line first, so browsers that don't understand in oklch still get a gradient.
Questions
How do I add a gradient background in CSS?
Set it on background or background-image, for example background: linear-gradient(90deg, #ff7e5f 0%, #feb47b 100%);. Copy the CSS above and paste it into your rule; the first line is a solid fallback color.
How do I make a gradient with a hard line?
Put two stops at the same position with different colors, such as red at 50% and blue at 50%. Drag one handle onto another, or type the same number in the position field.
Can I use this gradient in Tailwind?
Yes. Switch the output to “Tailwind class” to get an arbitrary-value class such as bg-[linear-gradient(90deg,#ff7e5f_0%,#feb47b_100%)], where underscores stand for spaces.
Which browsers support conic gradients and “in oklch”?
Conic gradients work in all current browsers. Gradient interpolation with in oklch is supported in Chrome, Edge, Safari and Firefox releases from 2023–2024 onward; older browsers use the sRGB fallback line.
Can I share a gradient?
Yes. The page address updates as you edit, so “Copy link” shares the exact gradient, including type, angle, stops and blending.