How to use it
A gradient is two decisions: which colors, and how the space between them is filled. This page keeps both in front of you and writes the CSS as you go.
- Start from colors you already have. If you arrived from another InstantPalette tool, press From palette and your colors become the stops. Otherwise pick a preset, or press Randomize for a fresh set built from the same harmony rules the palette generator uses.
- Move the stops. Drag a handle along the bar, or focus one and use the arrow keys. Click an empty part of the bar to add a stop there, and press Delete to remove the one you have selected. Two stops is the minimum.
- Edit the selected stop underneath: type a hex code, open the system picker, or pull its opacity down if you want the gradient to fade out over whatever sits behind it.
- Choose the shape. Linear runs along an angle you set with the dial. Radial spreads out from a center you choose. Conic sweeps around that center like a color wheel. Mesh drops three to six soft blobs on the canvas that you drag into place.
- Pick a blend space. OKLCH is the default because it keeps the middle of a blend as bright and as saturated as the ends. Switch to sRGB if you need to match an existing gradient exactly.
- Check the text readout if anything will sit on top, add a little grain if you see banding, then copy the CSS or download a PNG.
Why the blend space changes everything
Take a blue and a yellow and ask a browser for the color halfway between them. For twenty-five years the answer has been computed by averaging red, green and blue, and that average lands on a dull gray. The colors at each end are fine; it is the middle that lets the gradient down. Designers learned to work around it by adding a third stop by hand, which is really an apology for the math.
OKLab and OKLCH fix the math instead. Both are perceptual spaces, meaning a step of the same size looks like the same size change to a human eye no matter where you take it. Blending in OKLab keeps the brightness of the midpoint where you would expect it. OKLCH goes one step further and splits a color into lightness, chroma and hue, so a blend can travel around the hue circle rather than cutting straight across it through gray. That is why a blue-to-yellow ramp in OKLCH passes through green instead of mud.
CSS exposes this with one phrase inside the gradient, and the browser does the rest. The export always writes an ordinary sRGB gradient first and the perceptual one on the line after it, because a browser that cannot parse the second declaration simply keeps the first. Nobody gets a blank box.
Mesh, grain and readable text
Mesh gradients are the soft, multi-colored washes that turned up on landing pages a few years ago. Design tools build them from a real mesh of control points; CSS has no such thing. What CSS can do is stack several radial gradients that each fade to full transparency, and that stack looks close enough that most people cannot tell. Mesh mode here is exactly that stack, in plain CSS, with the points draggable and the base color taken from your first stop.
Grain solves a different problem. A gradient that covers a whole hero section changes color very slowly, and on an 8-bit display the steps between values become visible stripes. A faint layer of noise breaks those stripes up. The grain is an SVG turbulence filter written straight into the CSS as a data URL, so it costs no extra request, and the PNG export bakes it in.
The last panel is the one people forget. Text on a gradient is not one contrast check, it is a check at every point along the ramp, and the failing point is usually somewhere in the middle. The readout samples 64 positions, works out the contrast of white text and of black text at each of them, and reports the worst result for both together with where it happened. Ratios are floored rather than rounded, so nothing gets promoted to AA by a hundredth of a point. If both inks fail, the gradient is too mid-toned for text and the fix is to push one end much lighter or much darker.
Questions
What is the difference between sRGB, OKLab and OKLCH blending?
They are three ways of deciding what sits between two stops. sRGB mixes the red, green and blue channels directly, which is what browsers have always done and what can make a blue-to-yellow blend pass through gray. OKLab mixes in a perceptual space, so the midpoint keeps its brightness and rarely goes muddy. OKLCH mixes lightness, chroma and hue separately, so the blend travels around the color wheel instead of cutting across it, which keeps saturated ramps vivid.
Do all browsers support gradients with in oklch?
Current versions of Chrome, Edge, Safari and Firefox do. Older browsers ignore a gradient they cannot parse, which is why the exported CSS always writes a plain sRGB gradient first and the wide-gamut version second. A browser that understands the second line uses it, and one that does not keeps the first. Nothing disappears either way.
Is a mesh gradient here real CSS?
Yes. CSS has no mesh gradient primitive, so mesh mode stacks three to six radial gradients that each fade to full transparency over a base color. That is plain CSS with no images and no JavaScript, and it is what the export gives you. The PNG export is there for cases where you would rather ship one flat image.
Why does my gradient look banded?
Banding shows up when a gradient covers a large area with very little color change, so each visible band is several pixels wide. Adding a small amount of grain is the usual fix because the noise breaks up the edges. Widening the difference between the stops, or adding a third stop so the ramp is not one long flat run, also helps.
Can I put text on a gradient?
You can, but you have to check the whole gradient rather than one point. The contrast readout samples the gradient at 64 places and reports the worst ratio white text and black text hit anywhere along it, together with the position where that happens. If the worst case fails, either darken or lighten the stops until one ink passes everywhere, or keep the text off the failing end.
What does the grain overlay do?
Grain lays a tiny tiled SVG noise texture over the gradient and blends it with the overlay mode. It hides banding, and it gives a flat gradient a little texture. It travels with the CSS export as a data URL, so there is no extra file to host, and the PNG export bakes it into the image.
Can I build a gradient from a palette I already have?
Yes. Open this page from the palette generator, the image color picker or the shade generator and your colors arrive in the address bar, ready to load with the From palette button. You can also paste a link that ends in ?c= followed by hex codes joined by hyphens. Randomize builds a fresh set from the same six harmony modes the palette generator uses.
How large can the PNG export be?
Up to 3840 by 2160, which covers a 4K desktop background or a full-bleed hero image. The image is drawn on a canvas in your browser at the size you pick, so a bigger export costs a moment of work on your device and nothing else. Gradients compress poorly as PNG, so expect a few hundred kilobytes at the largest size.