Color Gradients in Design: How to Use Them Well

By IWantFreeColorTools.com · 9 min read

Last updated: 2026-07-28

Good gradients follow three rules. Keep the two colors close together on the color wheel, blend them in a perceptually uniform space so the middle does not turn grey, and check your text contrast at the worst point of the gradient rather than the average. Do those and most gradients look intentional. Skip them and you get the muddy, slightly dated look that gives gradients a bad name.

This guide is about the design judgment, not the syntax. If you want the code for linear, radial and conic gradients, our CSS gradient guide covers every type with copy-paste examples. What follows is how to decide what to put in them.

When should you use a gradient at all?

Start from the assumption that you should not. Flat color is faster to read, easier to keep accessible, and almost never looks wrong. A gradient needs a reason.

Good reasons: you want to draw the eye to one specific area, like a hero section or a primary button. You want to suggest depth without a shadow. You need to fill a large empty area that would look flat and cheap in a single color. Or you are covering a photo with an overlay so text sits readably on top of it, which is probably the most defensible use of all.

Bad reasons: everyone else is doing it. It looks modern. The flat version felt boring. That last one is worth sitting with, because a design that feels boring in flat color usually has a layout or hierarchy problem, and a gradient will not fix it. It will just make the same problem shinier.

One per screen is the working limit. Gradients work by pulling attention, so two of them compete and both lose.

Which colors actually work together in a gradient?

Neighbours. Colors that sit near each other on the color wheel blend cleanly because the path between them is short and stays saturated the whole way.

The reliable combinations, roughly in order of how hard they are to get wrong:

• Two shades of one hue. Deep blue to lighter blue. Almost impossible to make ugly, and it reads as depth rather than decoration.
• Adjacent hues. Blue to purple, orange to pink, teal to green. This is where most good brand gradients live.
• One hue plus a neutral. A colour fading into near-black or off-white. Useful for photo overlays.
• Warm to warm, cool to cool. Staying on one side of the temperature line keeps the blend coherent.

What to avoid: complementary pairs sitting directly opposite each other, like red to green or blue to orange. The straight line between them runs through grey, and you get a dead zone in the middle. If your brand genuinely needs both, put a third color between them to route the blend around the dead spot rather than through it.

If you are building this into a brand system, our brand color guide covers how to pick the base palette first. Gradients should come out of the palette, not replace it.

Why does the middle of your gradient look muddy?

This is the single most common gradient problem, and it has a one-line fix that most designers have never been told about.

By default, a browser blends between two colors in sRGB. That is a rectangular color space, and the straight line between two saturated colors passes through a region of lower saturation. So your vivid pink and your vivid blue meet somewhere in the middle as a washed-out lavender-grey. The gradient is doing exactly what you asked. You just asked in the wrong color space.

The W3C's CSS Images Module Level 4 addresses this directly. It adds a color interpolation method to gradient functions, so you can name the space the blend runs through. The spec is explicit about why it matters, noting that choosing a polar rather than a rectangular colorspace for gradient interpolation avoids desaturation, because polar spaces like LCH and Oklch are inherently chroma-preserving.

In practice that means writing the space into the gradient:

The same two colors, blended through a space built to match how we actually perceive color, keep their intensity across the whole run. The spec's own example shows one pair of colors drawn three ways, in Lab, in sRGB and in Oklab, precisely because the difference is obvious once you see it side by side.

If you take one thing from this article, take this. Most gradients people call ugly are not badly chosen, they are badly interpolated.

How do you keep text readable on a gradient?

Measure contrast at the worst point, not the average. That is the whole discipline.

A gradient running from light to dark will pass a contrast check at one end and fail at the other. Designers test the middle, see a comfortable number, and ship something that becomes unreadable in the corner. The failure is invisible to you because you know what the text says.

WCAG 2.2 success criterion 1.4.3 sets the bar at Level AA: at least 4.5 to 1 for normal text, and at least 3 to 1 for large text, where large means 18 point or 14 point bold, roughly 24px and 18.5px. The criterion also lists insufficient contrast caused by a background image as a failure, and a gradient background behaves the same way.

Three ways to handle it:

• Narrow the range. If both ends of the gradient are dark, white text passes everywhere. A gradient does not need to travel far to look good.
• Add a scrim. A semi-transparent flat overlay between the gradient and the text. Standard practice for text on photos, and it works just as well here.
• Move the text. Put it on a flat panel and let the gradient live in the space around it.

Check both ends with a real tool rather than by eye. Our contrast checker gives you the ratio, and the contrast accessibility guide explains what the numbers mean.

Do gradient buttons pass accessibility checks?

They can, but there is a second criterion people forget about.

Text on the button is covered by 1.4.3 above. The button itself is covered by WCAG 2.2 success criterion 1.4.11, which requires at least 3 to 1 for user interface components and meaningful graphical objects, also at Level AA.

The detail that matters for gradients is how it is measured. The criterion says contrast should be assessed against adjacent colors at the point where the element appears, not across the whole page. So a gradient button sitting on a gradient background has to clear 3 to 1 at every point along its edge, and the two gradients are both moving. That is a genuinely hard thing to get right, and it is a good argument for putting a gradient button on a flat background.

Focus states need attention too. If your focus ring is a colour that works against the light end of the gradient and vanishes against the dark end, keyboard users lose track of where they are.

What causes gradient banding and how do you fix it?

Banding is the visible stepping you sometimes see across a large gradient, where a smooth blend turns into a set of stripes. It happens when the gradient covers a wide area with very few color values available to describe the change, so the display rounds neighbouring pixels to the same value and you see the joins.

It shows up most on large hero backgrounds, on subtle gradients between two very similar colors, and on darker gradients where there is less headroom to work with.

What helps:

• Increase the distance between your colors. Counterintuitively, a very subtle gradient bands more easily than a bolder one, because there are fewer distinct values in the range.
• Add a middle stop. Giving the blend a waypoint changes how the values distribute.
• Add a faint noise or grain overlay. A tiny amount of texture breaks up the bands and is the standard fix in print and digital both.
• Use a CSS gradient rather than an exported image. Compression artefacts in a JPG make banding worse, and the file is heavier for no benefit.

Which gradient mistakes make a design look amateur?

Five, in rough order of how often they show up.

Too many colors. Two is right for nearly everything. Three when you need a shift the eye can follow across a long space. Four or more and you have made a rainbow, and rainbows are very hard to use without looking like a free template.

Complementary pairs blended straight through the middle. Covered above. The grey dead zone is the giveaway.

Gradients on small elements. On a 24px icon or a thin border, the shift is too small to perceive. You have added complexity nobody can see.

Gradients behind body text. Even when contrast technically passes, a shifting background makes sustained reading harder. Save gradients for headings, heroes and decorative areas.

Competing gradients. One per screen. Two gradients fighting for attention read as busy rather than rich, and neither gets the emphasis you were after.

If you are working in dark mode, note that gradients behave differently there. Dark backgrounds have less room before banding appears, and a gradient that looked rich on white can go muddy on near-black. Our dark mode color guide covers the adjustments.

What else do people ask about gradient design?

Why does my gradient look muddy or grey in the middle?

Because it is blending through sRGB by default, and the straight line between two saturated colors in that space passes through a desaturated zone. The W3C CSS Images Module Level 4 notes that choosing a polar rather than rectangular colorspace avoids this, since spaces like LCH and Oklch are inherently chroma-preserving. Adding an interpolation method such as in oklab to your gradient usually fixes it in one line.

How many colors should a gradient have?

Two for almost everything. Three when you genuinely need a shift the eye can follow, such as a long hero background. Beyond three you are usually decorating rather than designing, and every extra stop adds another place the gradient can go muddy or clash with text sitting on top of it.

Can you put text on top of a gradient?

Yes, but you have to check contrast at the worst point of the gradient, not the average. WCAG 2.2 success criterion 1.4.3 requires at least 4.5 to 1 for normal text and 3 to 1 for large text at Level AA, where large means 18 point or 14 point bold. Insufficient contrast caused by a background image is a listed failure, and a gradient behaves the same way.

What contrast do gradient buttons need?

WCAG 2.2 success criterion 1.4.11 requires at least 3 to 1 for user interface components and meaningful graphical objects, at Level AA. The criterion says contrast should be measured against adjacent colors at the point where the element appears, not across the whole page, which matters when your button sits on a background that is changing colour behind it.

When should you not use a gradient?

Behind dense body text, on small UI elements where the shift is invisible anyway, and anywhere you have already used one nearby. Gradients work by drawing the eye, so two competing gradients on one screen cancel each other out. Flat color is the safer default and a gradient should be a deliberate exception.

Sources: W3C, CSS Images Module Level 4, on the color interpolation method for gradients and why polar colorspaces such as LCH and Oklch preserve chroma. W3C Web Accessibility Initiative, Understanding WCAG 2.2 success criterion 1.4.3 Contrast Minimum and success criterion 1.4.11 Non-text Contrast, both Level AA. Specifications are living documents, so check the current text before relying on a detail.