Smoother CSS gradients

Week 226 was posted by Charanjit Chana on 2022-02-21.

Gradients in CSS can be frustrating. It's not that easy to gently go from one colour to another.

A gradient fading from a vivid pink in to a vivid blue.

In Safari, the above example has a lot more blue towards the bottom than pink at the top. It just doesn't fade very well. We can fix this by introducing more stops.

Looks much better, but it's a lot of work to define each stop. If you're not precious about having a linear gradient and can cope with something more organic looking, you can use conic gradients. You can create a gradient that sweeps across the area and by playing with it's position and size you can create some really smooth gradients.

A sweeping gradient that fades from vivid pink in to a vivid blue, although what you can see is mostly blue.

While you could complain that we actually have a worse result as it is so blue. The gradient is subtler, but to me it's a far smoother and pleasing gradient. Thankfully, we can play with some values can can bring some of the pink back into play.

A sweeping gradient that fades from vivid pink in to a vivid blue.

This time, the corner is pretty harsh, so playing with the size, we can try and soften it a bit more.

A sweeping gradient that fades from vivid pink in to a vivid blue with a softer corner.

.grad-4 {
    background-image: conic-gradient(deeppink 70%, deepskyblue);
    background-size: 220%;
}

I really like how these gradients work. To me they appear much softer. Using gradients to apply a subtle block of colour behind some white text that appears on top of a photo is a problem I've had to solve many times but I've never been happy with the end result and it usually ends up meaning the entire photo needs some degree of shading or you have an unnatural cut-off point.

For that particular scenario, more steps in the gradient are more appropriate but for a lot of cases now, we can also look at considering other techniques.

More examples of smooth CSS gradients

Adam Argyle shard a link to a conic gradient gallery recently over at conic.style which is well worth checking out for examples and sample code.

There's a lot to look forward to when it comes to colours and gradients in CSS. There are going to be a lot more colour spaces to work with which will be a dream for designers (as if 16.7 million colours was't enough!).

Tags: