How to Make CSS Gradients That Actually Look Good

Your CSS works. The gradient appears. Technically, you've succeeded.

So why does it still look a bit... wrong?

Maybe the middle looks muddy. Maybe one colour takes over the whole background. Maybe the transition feels harsh. Or maybe you've spent ten minutes changing the angle from 45deg to 47deg and you're no longer sure whether anything looks better.

The good news is that you usually don't need more complicated CSS. You need to make a few better decisions about the colours, the transition and the space each colour gets.

1. Your colours are fighting each other

The first instinct when a gradient looks wrong is often to start changing percentages. But sometimes the problem starts before the colour stops. It starts with the two colours themselves.

Put two colours next to each other and they can look great. Blend them together and the transition between them may feel dull, harsh or unexpectedly grey.

2. Your colour stops are doing more than you think

Start with:

background: linear-gradient(
  90deg,
  #6c3cff,
  #36d1dc
);

With no explicit stop positions, the browser distributes the colours across the gradient for you. That may be exactly what you want. But sometimes you want one colour to dominate more of the background. That's when the stop positions become useful.

background: linear-gradient(
  90deg,
  #6c3cff 0%,
  #36d1dc 70%
);

The transition now behaves differently because the second colour is reaching its full value later in the gradient.

3. Sometimes two colours are not enough

A two-colour gradient is often all you need. But if the middle of the transition is the part you dislike, adding a third colour can give you more control over the path between the two ends.

background: linear-gradient(
  90deg,
  #6c3cff 0%,
  #4f7cff 50%,
  #36d1dc 100%
);

Now the browser is not making the entire journey from purple to cyan in one step. You've given it a useful point in the middle.

4. The angle changes more than the direction

This:

linear-gradient(90deg, #6c3cff, #36d1dc)

and this:

linear-gradient(135deg, #6c3cff, #36d1dc)

use exactly the same colours. But they can feel surprisingly different once they're sitting behind real content. A horizontal gradient can create a strong left-to-right movement. A diagonal gradient can feel more dynamic. A vertical gradient may work better when you want the top and bottom of a section to feel different.

5. Your gradient may be competing with the content

A gradient can look beautiful on its own and fail completely once you put text on top of it. This is especially common with hero sections. One side of the background may make white text beautifully readable. A few hundred pixels away, the same text almost disappears.

6. The middle can become muddy

Sometimes your starting colour looks good. Your ending colour looks good. And the bit halfway between them somehow becomes the least attractive part. This is especially noticeable with certain highly saturated colours.

For more advanced work, modern CSS also provides ways to influence the colour space used for interpolation. Where appropriate and supported by your target browsers, gradients can interpolate in perceptual colour spaces such as OKLab - the chosen interpolation space can visibly change the colours produced between the stops.

background: linear-gradient(
  in oklab,
  #6c3cff,
  #36d1dc
);

This is an advanced option. You do not need it to make a good gradient. The important lesson is that if the middle looks wrong, changing the two end colours is not your only option.

Five CSS gradients you can actually use

Stop trying to find the perfect gradient

There isn't one CSS rule that makes every gradient look good. The same gradient can look completely different depending on the size of the element, the content sitting over it, the surrounding colours, the angle, the position of the stops, and how much attention the background is supposed to attract.

The useful habit is to stop changing everything at once. Change one thing. Look at the result. Then decide whether it solved the actual problem.

You don't need to guess percentages and angles in your code editor until something finally looks right. Open the Gridlock Holmes Gradient Tool, move the colours and stops visually, and copy the CSS when you're happy with the result.