Tätä opasta ei ole vielä omalla kielelläsi, joten tässä se on englanniksi.
Lyhyesti
- Most gradient design mistakes come from a handful of causes: colours that pass through grey, too many stops, visible banding, weak text contrast and untouched presets.
- A gradient between two opposite hues often turns grey in the middle in sRGB, which you can fix with a midpoint stop or OKLCH interpolation.
- Banding shows as visible stripes in slow, dark or subtle gradients, and a light layer of grain or dither usually hides it.
- Text on a gradient needs contrast checked at its worst point, not its best, because the background changes under every letter.
- A gradient looks expensive when it has a clear structure, three to five related colours, consistent texture and a reason to exist.
Tällä sivulla
The most common gradient design mistakes are grey, muddy middles, too many colours, visible banding, text that disappears, harsh stops, rainbow overload, mismatched grain, untouched presets and a look that is identical to everyone else's. Each one has a specific cause and a specific fix. None of them needs a new tool, only a closer look at what the blend is doing between its stops.
This guide takes the nine in the order you usually meet them, from the colour maths up to the identity. If you want the basics first, read what a gradient is.
Mistake 1: a grey, muddy middle
Blend two colours from opposite sides of the colour wheel, like blue and orange, and the halfway point in sRGB is a dull grey-brown. The browser averages the red, green and blue channels, and the average of two complements is close to neutral. The result looks like a smudge between two good colours.
Fix it by routing the blend through a colour that sits between the two on the wheel, or by interpolating in a perceptual space. Muddy gradients covers both methods, and OKLCH in CSS explains the syntax.
Mistake 2: too many colours
Every colour you add is another transition the eye has to read. Past four or five stops, a gradient stops reading as light falling across a surface and starts reading as a stripe chart. It also becomes impossible to reproduce the same way twice.
Pick one hue family, add a lighter and a darker relative, then allow one accent at most. The analogous colour approach is the safest starting point.
Mistake 3: stripes of banding
Banding is the staircase of visible steps you see in a slow gradient, especially a dark one. An 8-bit channel has 256 levels, and when a blend travels a short distance in colour across a wide area, each level becomes a band several pixels wide. Heavy JPEG compression makes it worse.
.hero {
position: relative;
background: linear-gradient(160deg, #0b1020 0%, #1e1b4b 60%, #312e81 100%);
}
.hero::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
opacity: 0.08;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}Grain works because it scatters pixels across neighbouring levels, so the edge between two bands disappears. Export as PNG or high-quality JPEG. Gradient banding goes through export settings in detail.
Mistake 4: text that disappears on the gradient
A gradient changes under every letter. White type can read beautifully on the dark end of a blend and vanish on the light end of the same line. Designers check the headline where it looks best, and readers meet it where it looks worst.
The background runs straight through the words, so some letters sit on bright colour.
The same design with the calm part of the field moved behind the text.
Check contrast at the brightest point behind light text, or the darkest point behind dark text. WCAG asks for 4.5:1 for body text and 3:1 for large text; colour contrast explains the numbers and text on a gradient covers placement.
Mistake 5: harsh, accidental stops
When two stops sit a few percent apart, the blend snaps from one colour to the next and draws a line nobody asked for. Hard stops are useful on purpose, for stripes and charts, but an accidental seam reads as an error.
Mistake 6: rainbow overload
A full spectrum is the loudest thing a gradient can do, and it rarely says anything about the brand using it. It also carries every hue's associations at once. If you want a rainbow, use a short arc of it and control the lightness. Rainbow gradients shows tasteful versions.
Mistake 7: grain that doesn't match
Avoid
- Coarse grain on the post, fine grain on the story, none on the slides
- Grain applied over text and logos
- Grain so heavy it reads as a dirty lens
- Scaling a grain texture up so each speck becomes a blob
Do
- One grain size and strength for every format
- Grain on the background layer only
- Just enough to break banding and add tooth
- Grain generated at the export size, not stretched
Texture is part of a look, so inconsistent grain makes a set of designs feel like it came from three places. Grainy gradients covers how much to use.
Mistake 8: shipping the preset untouched
Most tools offer the same two-colour blends at 135 degrees. They look fine, which is why they are everywhere. A preset is a starting point: shift one colour, add a third stop, change the direction to suit the layout and add a material. Using a gradient generator walks through those edits.
Mistake 9: looking like everyone else
The last mistake is the expensive one. A gradient that is well made but identical in spirit to every competitor's does no work for recognition. The fix is consistency plus something hard to copy, such as a material, a way of moving or a way of making room for words. Gradient branding explains how to own one.
| Mistake | Quick fix |
|---|---|
| Grey middle | Midpoint stop or OKLCH interpolation |
| Too many colours | One hue family plus one accent |
| Banding | Fine grain, PNG or high-quality export |
| Unreadable text | Check contrast at the worst point |
| Harsh stops | Space stops out, unless the edge is intended |
| Rainbow overload | Use a short arc of the spectrum |
| Mismatched grain | One grain recipe for every format |
| Untouched preset | Change colour, stops, direction and texture |
| Same as everyone | Add a material and keep it consistent |
Usein kysyttyä
Why does my gradient look grey in the middle?
Colours from opposite sides of the wheel average to a near-neutral in sRGB. Add a midpoint stop in a hue between them, or interpolate in OKLCH.
How do I stop a gradient from banding?
Add a fine noise or grain layer at low opacity, avoid heavy JPEG compression and give dark gradients a wider range of lightness to travel through.
How many colours should a gradient have?
Usually two to four related colours, with one accent at most. Beyond five stops, most gradients start to look busy.
How do I make text readable on a gradient?
Place text over the calmest part of the field and check contrast where the background is closest in lightness to your text. Aim for 4.5:1 for body text and 3:1 for large text.
Are gradient presets bad?
No, but they are shared by many people. Treat a preset as a starting point and change its colours, stops, direction and texture before using it.
Kirjoittanut Gradiently
Gradientlyn tiimi. Gradiently on Markien ympärille rakennettu suunnittelutyökalu: eläviä liukuvärejä, joiden ansiosta kaikki suunnittelemasi näyttää omaltasi.
Katso profiilimme
