How to use the CSS Gradient Generator
- Choose a type. Linear blends along a straight line at the Angle you set. Radial spreads out from a center point as a Circle or Ellipse. Conic sweeps around a center like a color wheel, starting at the Start angle.
- Edit the stops. Click anywhere on the stop bar to add a stop with the color already at that spot, drag handles to move them, and press Delete to remove the selected one. The Selected stop box sets its exact color, Position and Opacity; its Add stop button drops a new stop halfway to the next one, which is handy on a phone. Handles also move with the arrow keys (hold Shift for 10% steps).
- Leave Smooth blend in OKLCH on unless you want the classic look. It keeps the middle of the gradient colorful instead of letting it sink into gray.
- Copy the CSS. Copy CSS puts the finished declarations on your clipboard, including a fallback for older browsers. Reverse flips the stops, Random rolls a new harmonious pair, and the presets give you a dozen starting points.
- Export an image. Pick a PNG size — desktop, 4K, phone wallpaper, square or 4:5 post, 3000 × 3000, or a custom size up to 8000 px — and press Download PNG. The settings live in the page address, so a bookmarked or shared link reopens the same gradient.
Why the middle of a gradient goes gray
Browsers have traditionally blended gradient colors in sRGB: they take the red, green and blue numbers of the two stops and average them. That works for neighbors on the color wheel, but between opposite hues the channels cancel out. Blue #0000FF to yellow #FFFF00 passes through exactly #808080, a flat mid-gray, and red #FF0000 to cyan #00FFFF lands on the same gray. Painters know this effect from the palette — mix complements and you get mud — but on screen it happens even when you didn’t ask for it.
OKLCH describes a color by lightness, chroma (colorfulness) and hue, in a space built so that equal numeric steps look like roughly equal visual steps. Interpolating there walks around the hue circle instead of cutting straight through the gray center. Take the default preset, cobalt #2152D6 to sunflower #F8CB2E:
| Midpoint | HEX | OKLCH chroma |
|---|---|---|
| Blended in sRGB | #8C8E82 |
0.018 — almost neutral |
| Blended in OKLCH | #00B996 |
0.135 — a clear teal |
| The two end colors | #2152D6, #F8CB2E |
0.209 and 0.165 |
The OKLCH midpoint keeps nearly three-quarters of the end colors’ average chroma — the rest is trimmed only because the path brushes the edge of what an sRGB screen can show — and none of it turns to gray. It isn’t always the right choice — sometimes you want the quiet neutral middle, as in the Paper preset — so the checkbox is there for both.
What the CSS means
With smoothing on, you get two background declarations. The first lists the stops plus extra in-between stops sampled along the OKLCH path, so even a browser that only understands sRGB gradients shows a close match. The second uses the in oklch syntax, which every current major browser understands; Firefox was the last to add it, in 2024. Browsers skip a declaration they can’t parse, so older ones keep the first line and newer ones use the second.
A few conventions that trip people up: 0deg points up and angles turn clockwise, so 90deg runs left to right and 180deg — what CSS uses when you give no angle — runs top to bottom. A conic gradient’s from angle uses the same clock. A radial gradient without a size keyword reaches the farthest corner of the box, which is why a circle centered at 50% 50% in a wide banner still fills the corners.
Banding, and why the PNG is dithered
Each channel of an 8-bit image has only 256 levels, and subtle gradients use very few of them. The Paper preset, #FBFAF7 to #EDE6D6 at 160° on a 3840 × 2160 wallpaper, runs along a 3,343 px gradient line while its blue channel changes by just 33 levels — about one visible step every 101 px. A dark interface background from #1D1C1A to #2B2A27 across 1920 px has only 14 steps, each 137 px wide. On a good monitor those steps show up as stripes.
Dither adds a tiny amount of random noise, never more than one level up or down, before the colors are rounded. The stripes break up into grain too fine to see at normal viewing distance. The PNG is drawn by the tool pixel by pixel with the same geometry as CSS, so the export matches the preview, OKLCH blend included.
Tips from practice
Fade to the same color, not to transparent. The Text scrim preset fades #1D1C1A from 0% to 80% opacity rather than using the transparent keyword. Every browser blends that cleanly, and you avoid the faint gray halo some older engines draw when fading a light color to transparent black.
Check text over the darkest and lightest spot. A gradient behind a heading has a different contrast at each end. Test both end colors against your text in the Contrast Checker.
Pull stops from your own artwork. Gradients that borrow two or three colors from an illustration tie a portfolio header or a shop banner to the work itself. Grab them with the Image to Palette Extractor, then paste the HEX codes into the stop editor.
Export big, then let platforms shrink. A 3840 × 2160 PNG downsized by a phone or a website stays smooth; a 1280 px file stretched to fill a 4K screen shows every step. Avoid saving gradients as low-quality JPEG, which brings banding straight back.