The short version
- A gradient looks good when its colours meet without turning grey, its stops are unevenly spaced, and its light seems to come from one place.
- Grey or muddy middles happen when two opposite colours blend directly; adding a bridging colour or blending in OKLCH fixes them.
- A small amount of grain, around 2 to 6 percent opacity, hides banding and makes a digital gradient feel like a surface.
- A good gradient always leaves a calm area where words can sit with strong contrast.
- Export gradients as PNG or high quality video rather than compressed JPEG, which creates visible stripes.
On this page
Knowing how to make a gradient look good comes down to seven checks, run in order: colours that meet without going grey, stops placed unevenly, light that comes from one direction, a ground that sets the mood, a touch of grain, a calm space for words, and an export that keeps it smooth. Each is a quick test with a clear fix. Almost every gradient that looks cheap fails at least two of them, and fixing those two usually does more than changing the colours entirely.
The test
If it fails
The test
If it fails
The test
If it fails
The test
If it fails
If it fails
The test
If it fails
The test
If it fails
1. Colours that meet cleanly
When two colours opposite each other on the wheel blend directly, the middle drops into grey. Blue to orange and green to pink are the usual offenders. Either add a bridging colour between them, so the blend travels round the wheel instead of through the centre, or blend in a perceptual colour space. Muddy gradients and gradient interpolation explain both.
2. Stops placed unevenly
Evenly spaced colours read as a ramp from a preset. In nature, one colour usually dominates and the change happens over a short stretch: a sky is mostly blue with a narrow warm band at the horizon. Give your main colour 60 to 70 percent of the frame and let the others arrive late. Gradient colour stops goes deeper into placement and hints.
3. Light from one direction
A good gradient feels lit. Pick where the light comes from, usually a top corner, and make that area the brightest and most saturated. Everything else falls away from it. If you can't point to the light source, the gradient will feel flat no matter what colours you use. A soft radial gradient layered over a linear one is the quickest way to add it.
4. A ground that sets the mood
Decide whether the design is dark or light, and commit. A gradient that wanders from mid violet to mid pink has no ground, so it feels undecided. A near black base makes colours glow; a warm off white makes them feel printed. Push the base further than feels comfortable, then bring it back one step.
5. Grain: the right noise ratio
Perfectly smooth digital gradients show stripes on many screens, and they look like software defaults. A fine noise layer fixes both. The useful range is narrow: below about 2 percent opacity you won't see it, and above about 8 percent it reads as a deliberate texture rather than a finish. For dark gradients, start at 3 percent; for pale ones, 5 percent, because noise is harder to see on light colours.
.gradient {
position: relative;
background: radial-gradient(circle at 80% 20%, #ec4899 0%, #6d28d9 30%, #1e0b3a 65%, #0c0618 100%);
}
.gradient::after {
content: "";
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
opacity: 0.04;
mix-blend-mode: overlay;
pointer-events: none;
}More grain recipes are in grainy gradients and CSS noise texture.
6. A calm space for words
Most gradients exist to carry a message. Find where the words go, and make sure that area is the calmest and most consistent in tone, so every line has the same contrast. The brightest, busiest part of the gradient belongs somewhere else. Never fix poor contrast with a glow behind the letters: move the light instead.
Fails check 6: the colour runs straight through the words.
Passes: the area behind the text is calmer and every line reads.
This is the check Gradiently does for you. A Mark knows where your words are: its calmest region moves behind the text, colours near letters deepen or lift, and Auto ink picks light or dark type for each line from the Mark's own palette.
7. An export that keeps it smooth
- Stills: export PNG. JPEG compression turns long fades into steps, and social apps compress again on upload.
- Video: use a high bitrate MP4 at the exact platform size, so nothing is rescaled.
- Size: export at the platform's own dimensions, such as 1080×1350 for an Instagram post, rather than letting the app crop.
- Check on a phone: look at the uploaded version, in a dark room, at full brightness. That is where banding hides.
If stripes survive all of this, gradient banding has the deeper fixes.
Questions people ask
How do I make a gradient look good?
Use colours that blend without going grey, place stops unevenly, light it from one direction, commit to a dark or light ground, add a little grain and leave a calm space for words.
How much noise should I add to a gradient?
Usually 2 to 6 percent opacity. Start around 3 percent on dark gradients and 5 percent on pale ones, and stop as soon as the stripes disappear.
Why does my gradient look muddy?
Two opposite colours are blending through grey. Add a bridging colour between them or blend in OKLCH.
Why does my gradient look cheap?
It is probably two colours, evenly spaced, at a 45 degree angle, with no grain. Those are the defaults of most tools, so they read as unconsidered.
What file format is best for gradients?
PNG for still images and high bitrate MP4 for video. Compressed JPEG shows banding in long, smooth fades.
Written by Gradiently
The team behind Gradiently, a design tool built around Marks: living gradients that make everything you design look like yours.
See our profile