Josh Comeau
January 11th, 2022
My latest tool, a gradient generator
Not already subscribed?
Sign up so you don't miss the next issue!
Josh Comeau

Hello there!

So, something that has bothered me for a long time: gradients often seem to get a bit "washed out" in the center.

Notice how this yellow/blue gradient turns to slush in the middle:

a blue/yellow gradient with a greyed-out center

The reason this happens is super interesting, and here's the really exciting part: it's avoidable!

I've created a tool that will help you generate beautiful, lush, CSS-ready gradients that don't suffer from this issue.

Here are some examples of the gradients I've created with it:

a nicer blue/yellow gradienta nice red gradient that spans from dark to light
a nice pink/purple gradienta wild gradient with a sharp line

In order to help explain how this tool works, I've written a new blog post, “Make Beautiful Gradients”:

This post goes deep into color theory, explaining why gradients tend to get washed out, and how we can avoid it using alternative color modes and a bit of trickery.

If you want to jump straight to the tool, you can check it out here:

Screenshot of the tool

I love small, single-focused tools like these. I recently shared a list of my favourite mini-tools on Twitter, the sorts of things that I use in my real-world projects to help save me a bit of time, or achieve a better result.

One more thing: I recently appeared on the Frontend Horse “Holiday Snowtacular” fundraiser. In this 20-minute video, I share how I build HTML Canvas interactives, like the one on my blog:

Screenshot of the tool

The one we build in the video isn't quite the same, but we cover a lot of the same ground. If you're interested, you can catch the replay here:

That's all I've got this time around! I hope that 2022 is off to a good start for you. 💖