Search⌘K

Gradients & effects · 6 tools

Gradient and Color Effect Tools

Gradients, mesh, duotone, glass, colored shadows and grain — with the interpolation done in a space that does not go muddy.

A gradient between two attractive colors frequently has an unattractive third color in the middle that nobody chose. That color is an artifact of interpolation space. The browser default is gamma-encoded sRGB, so the midpoint is the arithmetic mean of two numbers that were encoded for storage rather than for arithmetic — the result is darker and less saturated than the perceptual midpoint, most obviously when the endpoints are far apart in hue.

CSS can now be told otherwise. linear-gradient(in oklab, …) interpolates in a perceptual space and the muddy middle disappears. For gradients that travel a long way around the wheel, in oklch with an explicit hue interpolation method keeps chroma up across the sweep instead of dipping through gray at the halfway point.

The other artifact worth knowing is banding: visible steps in what should be smooth. It is a quantisation effect, at its worst in large, dark, low-contrast gradients — precisely the kind used as a page background. A few percent of noise dithers the step edges away, and as a generated CSS or SVG texture it costs almost nothing.

All 6 gradients & effects tools

Gradients & effects

CSS Gradient Generator

Interpolate in OKLab and the gray dead zone disappears.

 Gradients & effects

Mesh Gradient Generator

Soft, layered, expensive-looking backgrounds. Pure CSS.

 Gradients & effects

Duotone Generator

Two colors, one image, instant art direction.

 Gradients & effects

Colored Shadow Generator

Black shadows are a bug. Tint them to the background.

 Gradients & effects

Glassmorphism Generator

Frosted glass that still passes contrast.

 Gradients & effects

CSS Blend Mode Lab

All twelve separable modes, computed live.

Frequently asked questions

Why do my CSS gradients look muddy in the middle?

Because the browser interpolates in gamma-encoded sRGB by default, averaging numbers that are not proportional to light. The midpoint comes out darker and less saturated than the color your eye expects halfway between the two ends. Adding in oklab to the gradient function fixes it directly.

How do I stop gradient banding?

Add noise. Banding is 8-bit quantisation made visible, and it shows up worst on large, dark, low-contrast ramps. Overlaying a few percent of fine noise breaks up the step boundaries so the eye reads a smooth ramp — a generated SVG or CSS texture is enough, and it costs a fraction of a kilobyte.

What color should a shadow be?

Not black at low opacity, which is what most defaults do and why so many interfaces look slightly dead. A shadow is the absence of light on a surface that has a color, so tinting it toward the background hue — or toward the complement of the object casting it — reads as depth rather than as dirt. Increase chroma slightly as the shadow gets larger and softer.

How do blend modes work with color?

Each mode is a per-channel function of the source and backdrop values, applied after both are converted to the blending color space. The separable modes — multiply, screen, overlay — operate channel by channel; the non-separable ones — hue, saturation, color, luminosity — decompose both layers into luminosity and chrominance and recombine them selectively, which is why color can recolor an image while preserving its shading.

Other categories