CSS Gradient Generator

// Why gradients go gray in the middle, and what fixes it

Write `linear-gradient(blue, yellow)` and the browser walks from one color to the other one channel at a time: red climbs from 0 to 255, green climbs from 0 to 255, blue falls from 255 to 0. Halfway along, all three sit at about 128, which is a dead mid gray. The same thing happens, less obviously, on every gradient that crosses a large span of hue: orange to teal sags through mud, purple to lime passes through something the color of wet cardboard. Nothing is broken. The numbers are being averaged in sRGB, which is a storage format built around what a monitor does with voltage, not around what an eye does with light.

OKLab is a different set of axes for the same colors, fitted to how people actually judge lightness and colorfulness. Blend along those axes and the midpoint of blue and yellow keeps its chroma instead of dropping to zero, so the gradient stays a gradient the whole way across. Turn Smooth on above and the preview, the CSS and the PNG all take that path. Turn it off to see what the browser does on its own, which is worth doing once on a pair of distant colors just to see how much is being lost.

There are two ways to say this in CSS, and this page emits both. The modern one is a single clause inside the gradient function, `linear-gradient(135deg in oklab, ...)`, which asks the browser to do the interpolation itself. The older way is to compute the in between colors here and hand the browser a longer list of stops that trace the same curve. The copied CSS carries the long version first and the short version second, so a browser that understands the clause uses it and one that does not still draws the right gradient rather than nothing.

// Mesh gradients, and the honest limit of CSS

A mesh gradient is the soft, multi directional wash that has been on every other app landing page for a few years: several colors bleeding into one another with no straight edge anywhere. Switch to Mesh above and each color becomes a blob you can drag around the canvas, or nudge with the arrow keys once it has focus.

CSS has no mesh gradient. What it has is radial gradients, and stacking one per color over a base gets close enough to be worth pasting, which is what the CSS box gives you in this mode. It is an approximation and the difference is specific: a real mesh blends every overlapping color together, while stacked radials composite them in order, so where three blobs meet you get the top one fading over the other two rather than a genuine three way blend. Nobody notices on a hero background. If you want exactly what the preview shows, the PNG is the file that has it, because the preview and the PNG are drawn by the same code.

The colors are ordinary hex all the way through, and everything is computed on your device. Drag a blob a hundred times and nothing is uploaded, nothing is queued, and there is no account anywhere in it.

// Banding, grain, and getting the file you actually need

A wide, slow gradient on an 8 bit screen shows banding: a channel can only step by one, and a gentle ramp holds each value for many pixels before stepping, which draws a visible stripe. It is most obvious on dark backgrounds and on large flat washes, which is exactly what a gradient wallpaper or hero image is. The usual fix is dither, and the Grain slider is that fix: a small amount of monochrome noise, the same nudge on all three channels, which breaks up the step without tinting anything. Two or three notches is enough to kill banding. Higher settings stop being a fix and start being a texture, which is also a legitimate thing to want.

Grain lives in the PNG rather than in the CSS, because CSS has no way to express it. If you are shipping the gradient as a background on a live page, copy the CSS and accept the banding, or copy the CSS and lay a tiny tiled noise image over it in your own stylesheet. If you are shipping it as an image, download the PNG at the size you need and the grain is already in the file at full resolution, which is where it belongs. The export sizes cover a desktop background, a slide, a social card, a square and a phone screen, and the width and height fields take anything else.

One thing worth knowing about the exported file: the preview on this page is drawn small enough to repaint while you drag, and the PNG is drawn at the size you asked for. Same gradient, same code, more pixels. Grain is the one part that looks different between them, because noise at 1920 pixels wide is finer than the same noise at 900.

// fair questions

Why does my gradient turn gray in the middle?

Because the browser is averaging the two colors in sRGB, channel by channel. Halfway between blue and yellow every channel lands near 128, which is a mid gray, and the further apart your two colors sit in hue the more colorfulness the middle loses. Switching the Blending control to Smooth blends through OKLab instead, which keeps the midpoint colorful. The CSS this page gives you carries that fix in both the modern and the older syntax.

Can a mesh gradient be done in pure CSS?

Not properly. CSS has no mesh gradient function, so the usual approximation is several radial gradients stacked over a background color, which is what the Mesh mode's CSS gives you. It looks right for a hero background. It differs from a real mesh where three or more blobs overlap, because stacked radials composite in order rather than blending all the colors together. The PNG download is drawn the way the preview is, so that is the file to use when the exact result matters.

How do I stop gradient banding?

Add a little noise, and use more of the gradient's range. Banding is an 8 bit rounding artifact: a slow ramp holds each channel value across many pixels and the step between values becomes a visible stripe. A small amount of monochrome grain, which is what the Grain slider adds to the PNG, scatters that boundary so the eye stops resolving it. Two or three notches is usually enough. Adding more color stops also helps, because it shortens the span each step has to cover.

What angle should a background gradient be?

For a page background, something a little off the vertical reads better than a straight one: 135 degrees is the common default because the light appears to come from the top left, which is where people expect it. Straight 180 degrees (top to bottom) is the safest choice behind text, since the brightness only changes in one direction and line by line contrast stays predictable. Use 90 degrees for a horizontal band, and avoid an angle so shallow that the corners fall outside the color range you chose.

Does linear-gradient(in oklab) work in every browser?

In current ones, yes, and it has been supported in Chrome, Edge, Safari and Firefox for long enough that most traffic has it. Older browsers do not recognise the clause and would drop the whole declaration, which is why the CSS copied from this page has two lines: the first spells the same curve out as extra color stops and works everywhere, and the second uses the modern clause and overrides the first wherever it is understood. Paste both and you do not have to care which browser is asking.

Is this gradient generator free?

Yes. No account, no signup, no watermark on the PNG, and no limit on how many you make. Everything runs in your browser: the colors are computed on your device and the PNG is drawn on your device, so nothing you build here is uploaded anywhere.