Skip to content
Dogu SangjaToolboxAll tools

CSS Gradient GeneratorBeta

Build linear, radial, and conic gradients visually and copy the background CSS. Optional OKLCH interpolation keeps midpoints vivid instead of muddy.

Presets

Type
deg

Color stops

Click the bar to add a stop there, and drag a handle to move it. With the keyboard, arrow keys move a stop by 1% (10% with Shift), and Delete removes it.

%
%

CSS

background: linear-gradient(90deg, #ff7e5f 0%, #feb47b 100%);

Instead of memorizing linear-gradient(...) syntax and typing it by hand every time you need a background gradient, build it visually here and copy the finished CSS.

Gradient types and syntax

  • Linear (linear-gradient): A single angle sets the direction. 90deg goes left to right, 180deg goes top to bottom.
  • Radial (radial-gradient): Spreads outward from a center point. You choose a shape (circle or ellipse) and a center position.
  • Conic (conic-gradient): Colors sweep clockwise around a center point. You choose a starting angle and a center position.

All three use a list of color stops. Each stop is a color plus a position (0-100%), and this tool lets you add, remove, and reorder anywhere from 2 to 8 of them. You can also drag a handle on the gradient bar to move a stop, or click the bar to add one where you want it.

Why OKLCH interpolation avoids muddy midpoints

By default, a CSS gradient blends two colors’ red, green, and blue values in a straight line through the sRGB color space. The catch is that perceived brightness doesn’t scale evenly with those numbers. So blending two colors that sit far apart on the color wheel makes the midpoint dip in brightness, reading as muddy or nearly gray.

  • Red (#ff0000) to green (#00ff00): the sRGB midpoint is a dull olive (#808000), while the OKLCH midpoint is closer to a bright orange.
  • Blue (#0000ff) to yellow (#ffff00): the sRGB midpoint is nearly gray (#808080), while the OKLCH midpoint is closer to a vivid teal.

OKLCH separates lightness (L), chroma (C), and hue (H) into their own axes, so it’s much easier to shift hue while keeping lightness steady — and the midpoint stays vivid as a result. Turn on this tool’s “Interpolate in OKLCH” option to see that exact calculation applied, in both the preview and the copied CSS.

Browser support and the fallback

Color-interpolation-method syntax like in oklch is a relatively recent addition to the CSS spec, so older browsers may not recognize it. When you turn on OKLCH interpolation, this tool writes two lines when you copy the CSS:

  1. A fallback line that looks the same everywhere, with the OKLCH-computed colors expanded into many plain sRGB stops
  2. A line using the real in oklch syntax

Declaring the same property (background) twice means CSS applies whichever one comes later, so a browser that understands in oklch uses the second line, and one that doesn’t falls back to the first automatically. Actual support keeps evolving, so for anything that matters, check against your own target browser list directly.

Sources

Frequently asked questions

What exactly does turning on "Interpolate in OKLCH (in oklch)" change? Is it safe to use right now?

By default, a CSS gradient blends two colors in a straight line through the sRGB color space. Turning on in oklch blends through the OKLCH color space instead, which keeps the midpoint more vivid. When you copy the CSS, this tool writes two lines: a fallback that looks the same in every browser (colors pre-computed in OKLCH, then expanded into many plain sRGB stops), followed by the real in oklch syntax. Because CSS lets a later declaration of the same property win, browsers that understand in oklch use the second line, and every other browser automatically falls back to the first. That makes it safe to paste in right away.

Why does the OKLCH-interpolated midpoint look different from what I'd expect?

A red-to-green gradient blended in sRGB lands on a dull olive (#808000) at the midpoint. Blending the same two colors in OKLCH instead lands closer to a bright orange. Going from blue to yellow, the sRGB midpoint is nearly gray (#808080), while the OKLCH midpoint is closer to a vivid teal. sRGB mixes numbers in a way that doesn't match how bright a color actually looks to the eye, so blending two colors that sit far apart on the color wheel makes the perceived brightness dip in the middle, reading as muddy or gray. OKLCH separates lightness from hue, so it's much easier to shift hue while keeping brightness steady — and the midpoint stays vivid.

Can I add more than 2 color stops?

Yes. This tool supports 2 to 8 stops. The Add stop button places a new stop halfway between the last stop and 100%. Clicking anywhere on the gradient bar adds a stop there, in the color currently shown at that spot. You can change any stop's position (%) by dragging its handle on the bar or by typing a number.

Can this generate repeating gradients, like repeating-linear-gradient?

No. This tool only produces linear-gradient, radial-gradient, and conic-gradient. If you need a repeating version, take the CSS this tool generates, add the repeating- prefix to the function name, and adjust the stop positions to the repeat interval you want.

Can I paste the generated CSS in as-is?

Yes. The "Copy CSS" button copies one background declaration (with OKLCH off) or two (with it on). If the element already has another background color or image set, make sure the copied line comes after it so the gradient is what actually ends up applied.

Open-source software used: culori (MIT)