Gradient Generator
Build a CSS gradient visually, with a genuine fix for the banding cheap gradient tools ignore.
Adds intermediate stops on the same interpolation, reducing dither stripes on long low-contrast ramps.
Colour stops
Everything here runs on your device. Nothing you enter is uploaded or stored.
Build a linear, radial or conic CSS gradient with unlimited colour stops, see it live, and fix visible banding with a real technique rather than a slider that just claims to help. Copy the finished CSS when you’re done.
How to use it
- Choose a gradient type: linear, radial, or conic.
- For linear and conic, set the angle. Radial gradients don’t need one.
- Add colour stops and drag each one’s position slider to adjust where it falls.
- If a long, low-contrast gradient shows visible stripes, turn on the anti-banding option.
- Copy the finished
backgroundvalue from below the preview.
Why gradient banding happens, and why most fixes are fake
Banding — visible stepping or striping across what should be a smooth colour transition — is a genuine display limitation, not a rendering bug. Standard displays show 8 bits per colour channel, meaning 256 distinct shades of red, green or blue. A gradient spanning two similar, low-contrast colours (dark navy to slightly-less-dark navy, say) over a large area has to spread very few distinct shade values across a lot of pixels. The renderer dithers to approximate the in-between values, and on some displays and some colour pairs, that dithering becomes visible as faint bands.
Many gradient tools offer an “anti-banding” toggle that does nothing measurable — a cosmetic slider with no actual effect on the output. This tool’s version does something real: it inserts additional colour stops between each pair of your existing stops, and each inserted stop is calculated to sit exactly on the straight-line RGB interpolation your original gradient already implies. Mathematically, the gradient looks identical — you haven’t changed any colour. What you’ve changed is how many anchor points the renderer has to dither between, and more anchor points measurably reduces visible stepping on a long, low-contrast ramp. It’s a real technique used in production graphics work, not a placebo control.
Linear, radial and conic, and when each earns its place
Linear gradients travel in a straight line at a set angle — the default choice for most backgrounds, buttons, and overlays.
Radial gradients spread outward from a centre point in expanding circles or ellipses — useful for spotlight effects, vignettes, and radial shading that a linear gradient can’t produce.
Conic gradients sweep colour around a centre point like the hands of a clock, defined by a starting angle rather than a direction. They’re the newest of the three in browser support terms and are the right tool specifically for colour wheels, pie-chart-style visualisations, and circular progress indicators — effects that are awkward or impossible with linear or radial alone.
What it does not do
This produces standard CSS gradient syntax only — it does not export to SVG, Figma, or any design-tool-native format. It caps at eight colour stops, a practical limit past which a gradient editor becomes harder to use than it helps. It does not support gradient masks or blend modes; the output is a plain background value.
Gradient type comparison
| Type | Shape | Typical use |
|---|---|---|
| Linear | Straight line at an angle | Backgrounds, buttons, overlays |
| Radial | Expanding circle/ellipse from a point | Spotlights, vignettes |
| Conic | Sweep around a centre point | Colour wheels, circular progress |
When to use the anti-banding fix
| Gradient span | Contrast between stops | Banding risk |
|---|---|---|
| Small (button, 40px) | Any | Low — too small to see stepping |
| Large (hero, full-bleed) | High contrast (light to dark) | Low — enough shade range to dither smoothly |
| Large (hero, full-bleed) | Low contrast (similar shades) | High — turn on anti-banding |
Questions
What causes gradient banding, really?
An 8-bit display can only show 256 shades per channel. A long gradient between two similar, low-contrast colours has to spread those 256 shades across a wide area, and the renderer's dithering becomes visible as faint stripes — especially over a large surface like a hero background. It is a real display limitation, not a bug in any specific gradient.
How does the anti-banding option actually work?
It inserts extra colour stops between your existing ones, each one computed to sit exactly on the straight-line colour interpolation your original two stops already describe. This does not change what the gradient looks like mathematically — it gives the renderer more anchor points to dither between, which is what actually reduces visible stepping on a large, low-contrast ramp.
Why does conic have a "from" angle instead of a direction?
Conic gradients sweep colour around a centre point like a clock face, so they are defined by a starting angle for the sweep rather than a directional angle like linear gradients use. `conic-gradient(from 90deg, ...)` starts the colour wheel at the 3 o'clock position and sweeps clockwise.
Can I export this for use outside CSS?
The output here is CSS gradient syntax specifically. For design tools like Figma or Photoshop, you'd need to manually recreate the stops, though the colour and position values shown transfer directly.
Last updated