
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:
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”:
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:
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