mooie workbench

CSS Generator

Gradient

Modern CSS gradients with OKLCH interpolation. Cleaner blends, fewer muddy midpoints.

The default blends a neutral ground to ink in OKLCH space, which usually produces a cleaner midpoint than RGB or HSL. The compare strip shows the same stops in all three interpolation modes. Edit colors, drag stops, copy CSS, or share the URL.

Why a black-to-white gradient looks gray

Try the simplest gradient you can make: black to white, no extra stops.

The middle is gray. Specifically, it is #808080, the numeric average of black and white in sRGB. Browsers have blended that way for decades. It is predictable, but it does not match how the gradient feels to the eye.

Black reads fully dark. White reads fully bright. The midpoint between them should feel lighter than #808080. That darker-than-expected middle is what makes the blend feel muddy.

The same problem shows up in color gradients. Orange to blue can pass through a dull brown. Pink to teal can drift through gray. Designers often work around this by choosing safer color pairs or adding a third stop to rescue the middle. Those can help, but they are workarounds.

The better fix is to interpolate in a color space where halfway is closer to what your eye reads as halfway. For modern CSS, that space is OKLCH.

OKLCH in 90 seconds

OKLCH is a cylindrical form of OKLab, a perceptual color space designed by Björn Ottosson. It gives you three values:

  • Lightness — perceived brightness, from black to white.
  • Chroma — color intensity, from gray outward.
  • Hue — the angle around the color wheel.

Practical ranges: lightness runs 0% (black) to 100% (white), and 50% really does read as visually halfway. Chroma is open-ended in theory but bounded by display gamut. Most renderable colors fall under 0.37, and values past roughly 0.32 start landing outside sRGB and may render differently across browsers and devices. Hue is the angle around the wheel, 0 to 360 degrees: reds near 30°, yellows near 100°, greens near 140°, cyans near 200°, blues near 260°, magentas near 330°. Knowing the rough wheel positions makes it faster to read other people's OKLCH values and to write your own without reaching for a picker. When CSS hits an out-of-gamut value, browsers fall back to a clamped or mapped color; the visual cost is usually a slight desaturation rather than a wrong hue.

The useful part is perceptual lightness. In HSL, yellow and blue can share the same numeric lightness while looking wildly different in brightness. In OKLCH, equal lightness values are much closer to equal perceived brightness.

That is why OKLCH works well for gradients. When CSS interpolates in oklch, each step through the gradient tends to feel more even. The midpoint stops sinking into mud.

Hue movement is the other thing to watch. If you blend orange to cyan in OKLCH, the path may travel through yellow and green at a consistent lightness. That can be beautiful. It can also be more color movement than you want. The interpolation mode is a design choice, not just a technical upgrade.

When to use which interpolation

The compare strip shows the same stops rendered three ways. Use it while you edit; the differences are easier to see than to describe.

Use in oklch for most new work. It keeps lightness more consistent, handles high-contrast pairs better, and usually produces the most natural blend. This is the tool default for a reason.

Use in hsl when you want visible hue rotation through saturated color. HSL can create lively arcs, but its lightness is not perceptually even. Bright hues may flare and darker hues may drop.

HSL earns its place in a few real workflows. Rainbow swatches and mood-board strips benefit from HSL's hue arc; visible color movement is what the design is asking for, not a side effect. Code highlighters, calendar color systems, and category-coding palettes use HSL to step around the wheel at fixed lightness and saturation, generating distinct colors mechanically. Color exploration is another fit: when you don't yet know which hues belong in a palette, scrubbing through HSL hue space surfaces options that OKLCH's perceptual evenness deliberately smooths out. The lightness drift is the cost of admission; for these uses, it's a fair trade.

Use in srgb when you need compatibility with older environments or when you specifically want the old browser behavior. It is predictable, but high-contrast gradients can muddy through the middle.

The sRGB midpoints worth seeing: orange to blue traverses a brownish gray around 50% (the warm and cool channels canceling, lightness sagging). Pink to teal drifts through a flat gray for the same reason. Yellow to purple desaturates badly through the middle — the high-chroma endpoints have nowhere to go but down. Saturated red to saturated green famously passes through a muddy yellow-brown rather than the bright yellow your eye expects. Each of these renders differently in OKLCH: warmth survives across the warm-to-cool blend, midpoint gray gets replaced by a colored midtone, and saturation holds. The compare strip lets you see the same stops both ways without leaving the page.

The compare strip under the editor renders the same stops in all three spaces simultaneously. Pick a high-contrast pair, orange to blue being the canonical test, and watch the OKLCH row, then the sRGB row. The midpoint difference is the entire reason the tool ships an OKLCH default. The HSL row is the third reference, useful when the rotation arc is the design intent rather than the failure mode.

Common patterns

A few gradient recipes are worth keeping around.

Warm sunset. A vertical dusk gradient. Two warm stops, no gray detour. 

background: linear-gradient(
  180deg in oklch,
  oklch(78% 0.16 70) 0%,
  oklch(48% 0.18 25) 100%
);

OKLCH keeps the center warm. In sRGB, the same blend tends to brown out.

Sky to horizon. A vertical sky gradient with one hue and changing lightness. 

background: linear-gradient(
  180deg in oklch,
  oklch(72% 0.10 240) 0%,
  oklch(92% 0.04 240) 100%
);

The hue stays blue while chroma drops and lightness rises. It reads naturally because the lightness change matches the visual idea.

Brand color to tint. The boring useful one: a brand color blended to a quiet tint. 

background: linear-gradient(
  135deg in oklch,
  oklch(45% 0.14 260) 0%,
  oklch(96% 0.02 260) 100%
);

Useful for hero backgrounds, card surfaces, and soft brand presence behind type. Lower the chroma at the light end so the tint stays calm.

Monochrome shift. A cool grayscale with a small amount of hue.

background: linear-gradient(
  90deg in oklch,
  oklch(28% 0.02 260) 0%,
  oklch(94% 0.01 260) 100%
);

Good for editorial backgrounds and quiet surfaces. Shift the hue cooler or warmer without changing the structure.

These are starting points, not presets. Tune the lightness, nudge the hue, and make the gradient fit the page.

Browser support

OKLCH gradient interpolation is supported in current Chrome, Safari, Firefox, and Edge. For most production work, in oklch is safe to ship.

If your project targets old embedded WebViews, locked corporate browsers, or legacy print workflows, add an sRGB fallback. The Fallback output tab is there for that case.

One Safari note: early OKLCH conic-gradient rendering had interpolation bugs. If conic OKLCH gradients are central to the design, test the actual Safari versions you support.

Related tools

  • Palette — extract a palette from an image, then send its colors into the gradient tool.
  • Contrast — check whether type over the gradient still reads clearly.
  • Type Scale — pair large gradient surfaces with type that responds to the viewport.
  • Shadow — combine gradients and shadow when a surface needs both tone and lift.

Workbench tools share a bench. Save a palette, gradient, type scale, or shadow stack once, then reuse it where the next decision needs it.