CSS gradient generator
Linear, radial and conic gradients with draggable stops, opacity and OKLCH interpolation. Copy CSS or a Tailwind v4 class. Free, no sign up, runs in the browser.
OKLCH and OKLAB blend without the grey band sRGB makes between two saturated colors.
background-color: #6D5BFF;
background-image: linear-gradient(
135deg in oklch,
#6D5BFF 0%,
#F472B6 100%
);
bg-[linear-gradient(135deg_in_oklch,_#6D5BFF_0%,_#F472B6_100%)]
How to use it
- 1Pick linear, radial or conic, then set the angle on the dial or the centre with the sliders.
- 2Click the bar to add color stops, drag them into place, and set each color and opacity.
- 3Switch interpolation to oklch or oklab if the middle of the gradient looks grey.
- 4Copy the CSS or the Tailwind class, or hit Random for a harmonious starting point.
How a CSS gradient is written
A gradient is an image function. linear-gradient(135deg, #6D5BFF 0%, #F472B6 100%) draws a line at 135 degrees, where 0deg points up and angles turn clockwise, and places each color at a percentage along it. A radial gradient takes a shape and a centre, radial-gradient(circle at 30% 25%, ...), and a conic gradient sweeps colors around a point, conic-gradient(from 0deg at 50% 50%, ...). Stops without a position are spread evenly; the tool always writes positions so the output is explicit. A stop with opacity below 100 is written as rgb(r g b / a), which is why the preview sits on a checkerboard. A conic gradient meets itself at 360 degrees, so repeat the first color as the last stop, as the Hue ring preset does, and the seam disappears.
background-color: #6D5BFF; /* fallback for very old browsers */
background-image: linear-gradient(135deg in oklch, #6D5BFF 0%, #F472B6 100%);
Why interpolate in OKLCH
By default browsers mix the stops in sRGB, and the midpoint between two saturated colors is often a dull grey, most visibly between blue and yellow or purple and green. Adding in oklch or in oklab after the angle tells the browser to interpolate in a perceptual space, so the middle keeps its chroma and the brightness ramps evenly. All current browsers support it (Chrome 111, Safari 16.2 and Firefox 127 onward). The preview falls back to sRGB if yours does not, and tells you.
Using the output with Tailwind CSS v4
The arbitrary class the tool prints, bg-[linear-gradient(...)] with spaces written as underscores, compiles to exactly the CSS above. For two or three evenly spaced stops Tailwind's own utilities read better and interpolate in OKLAB by default: bg-linear-135 from-violet-500 to-pink-400, with /oklch or /srgb as a modifier to change the space. Custom positions, opacity per stop or more than one via are easier as the arbitrary class, or as a CSS variable in @theme that you reference with bg-(image:--hero).
Frequently asked questions
Why does my gradient look grey in the middle?
Because it is mixed in sRGB, where the straight line between two saturated colors passes through low chroma. Set interpolation to oklch, or add a middle stop with a color you choose.
Can I use these gradients in Tailwind?
Yes. Copy the bg-[...] class, or rewrite simple ones with bg-linear-*, from-* and to-* utilities in Tailwind CSS v4.
Does the Random button pick any colors?
No. It picks one hue in OKLCH, walks a short way around the hue wheel at similar lightness and chroma, and gamut maps the result, so neighbouring stops always relate.