# How to make a gradient look good: a seven point check

[Canonical HTML page](https://gradiently.design/guide/gradient-noise-ratio)

Most bad gradients fail the same few tests. Run any blend through these seven checks, in order, and you will know exactly what to change before anyone else sees it.

## 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.

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.

| Check | The test | If it fails |
| --- | --- | --- |
| 1. Clean middle | Is the midpoint grey or brown? | Add a bridge colour or blend in OKLCH |
| 2. Uneven stops | Is every colour the same width? | Give one colour most of the space |
| 3. One light | Can you say where the light is? | Brighten one side or corner |
| 4. A ground | Is it clearly dark or clearly light? | Push the base darker or paler |
| 5. Grain | Can you see stripes? | Add 2 to 6 percent noise |
| 6. Room for words | Does the text read everywhere? | Calm the area behind it |
| 7. Export | Does it survive upload? | PNG for stills, high bitrate for video |

The whole check on one page. Run it top to bottom; later fixes depend on earlier ones.

## 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](https://gradiently.design/guide/muddy-gradients) and [gradient interpolation](https://gradiently.design/guide/gradient-interpolation) explain both.

- Fails: grey middle: `linear-gradient(90deg, #2563eb 0%, #f97316 100%)`
- Passes: magenta bridge: `linear-gradient(90deg, #2563eb 0%, #c026d3 50%, #f97316 100%)`
- Passes: blended in OKLCH: `linear-gradient(90deg in oklch, #2563eb 0%, #f97316 100%)`

The same two colours three ways. A bridge or a perceptual blend keeps the middle alive.

## 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](https://gradiently.design/guide/gradient-stops) goes deeper into placement and hints.

- Even thirds: `linear-gradient(180deg, #1e3a8a 0%, #7c3aed 50%, #f472b6 100%)`
- Weighted to the top: `linear-gradient(180deg, #1e3a8a 0%, #312e81 55%, #7c3aed 82%, #f472b6 100%)`

Same three colours. The weighted version has a mood; the even one has a formula.

## 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](https://gradiently.design/guide/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.

- No ground: `linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%)`
- Dark ground, lit corner: `radial-gradient(circle at 80% 20%, #ec4899 0%, #6d28d9 30%, #1e0b3a 65%, #0c0618 100%)`
- Light ground, lit corner: `radial-gradient(circle at 20% 20%, #fbcfe8 0%, #f5e8ff 40%, #faf7f2 80%)`

Checks 3 and 4 together. A clear ground and one light turn a preset into a scene.

## 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.

```css
.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;
}
```

A tiling SVG noise layer at 4 percent. Raise or lower the opacity in single steps while watching the darkest area.

More grain recipes are in [grainy gradients](https://gradiently.design/guide/grainy-gradients) and [CSS noise texture](https://gradiently.design/guide/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.

A sale post where part of the headline sits on a bright patch of the gradient and loses contrast

Fails check 6: the colour runs straight through the words.

The same sale post with a calmer, even area behind the headline so all the words read clearly

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](https://gradiently.design/guide/gradient-banding) has the deeper fixes.

## FAQ

### 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.