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:

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:

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

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:

• Gradient Generator 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:

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: https://www.youtube.com/watch?v=smkKv29iaZ8

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

-Josh