Natural Gradients in CSS


I want to talk about two cheap and relatively simple changes you can add to your CSS to make gradients look much better: easing linear gradients and colour spaces.

Use easing

Let's start with a real-world problem. Last week I was working on my new and shiny Consulting Page. I wanted to add a slider similar to the one one the site of Gabriel Valdivia, but more aligned with the style of my own site (example here):

What bugs me about this screenshot is that the gradient cuts off sharply, it doesn't blend with the element behind it.

The effect is more obvious when you compare these two gradients:

A
B

Note how B more blends with the background more naturally.

The solution here was to ease the transition between colours by specifying more stops:

--gradient: linear-gradient(
	to right,
	hsl(var(--bg-h), var(--bg-s), var(--bg-l)) 0%,
	hsla(var(--bg-h), var(--bg-s), var(--bg-l), 0.738) 19%,
	hsla(var(--bg-h), var(--bg-s), var(--bg-l), 0.541) 34%,
	hsla(var(--bg-h), var(--bg-s), var(--bg-l), 0.382) 47%,
	hsla(var(--bg-h), var(--bg-s), var(--bg-l), 0.278) 56.5%,
	hsla(var(--bg-h), var(--bg-s), var(--bg-l), 0.194) 65%,
	hsla(var(--bg-h), var(--bg-s), var(--bg-l), 0.126) 73%,
	hsla(var(--bg-h), var(--bg-s), var(--bg-l), 0.075) 80.2%,
	hsla(var(--bg-h), var(--bg-s), var(--bg-l), 0.042) 86.1%,
	hsla(var(--bg-h), var(--bg-s), var(--bg-l), 0.021) 91%,
	hsla(var(--bg-h), var(--bg-s), var(--bg-l), 0.008) 95.2%,
	hsla(var(--bg-h), var(--bg-s), var(--bg-l), 0.002) 98.2%,
	hsla(var(--bg-h), var(--bg-s), var(--bg-l), 0) 100%
);

This is ridiculously verbose and of course I didn't generate these stops manually! I used this tool by Andreas Larsen.

Here's the result:


Narrator: Smooth, sophisticated, mysterious - nothing says "I'm looking for a job" better than a perfectly eased gradient.

Colour spaces:

Another thing you could should do to achieve more natural colour transitions is to specify the colour space for your gradient. Here's the same transition in rgb and oklch:

rgb
oklch
oklch with multiple steps
rgb
oklch

Here's a really good description of why you should use oklch.

Notice how nicely oklch with multiple steps blends with the background of this page.

See this demo for more examples.

Summary

Now, now. I'm not suggesting that you should drop everything and start updating your CSS right this minute. But, if you're starting a new project, or are looking for a small piece of work because your brain is mush, give it a go.

PS. Do you remember when CSS gradient generators were a thing? Seems they're still a thing.

References:

Want to receive my work as I publish it? Subscribe here.

a giant foot-shaped snail with a house on its back. the house is still in construction, with a big crane towering above it The image is a stylized black-and-white illustration. In the lower left corner, there is a small, cozy-looking house with smoke rising from its chimney. The smoke, however, does not dissipate into the air but instead forms a dark, looming cloud. Within the cloud, the silhouette of a large, menacing face is visible, with its eyes and nose peeking through the darkness. The creature, perhaps a cat, appears to be watching over the house ominously, creating a sense of foreboding or unease.