Josh W. Comeau

Content Writer

Make Beautiful Gradients

What problem are we trying to solve? 

This article was authored by Josh W. Comeau, and provides an in-depth look into how you can get the most out of your CSS gradients. 

When selecting two colours and creating a gradient between the two, it can often result in a less than perfect blend from one colour to the other. This is what Erik Kennedy describes as the “gray dead zone”.  Josh helps us understand what this is and why it happens, and how you can take steps to prevent it occuring in your CSS gradients; by integrating colour theory practices into your web page designs.

Why does this happen to our CSS gradients? 

Josh begins by breaking down how `linear-gradient` works, and how the resulting midpoints between RGB colours equate to the colour gray. He explores an alternative colour mode called HSL, and how it can handle gradients in a more favourable manner, eliminating the dead zone between your colours, but there’s a catch, HSL does not represent light in a favourable way for humans. That’s where the colour mode HCL comes to our rescue, as it gives us the benefits of HSL, but light adjusted for the way humans perceive light and colour. 

How can we solve the CSS gradient problem? 

Unfortunately, due to the current limitations in CSS, we can’t directly specify the use of HCL as an alternative to RGB. We can however increase the number of colours we use in our gradients by using smaller midpoints between colours. Josh shares his amazing CSS gradient generator tool at the bottom of the article, which was inspired by the works of Erik Kennedy.

We highly recommend this article for those wanting to understand CSS gradients, and how you can leverage this understanding to improve the way you implement CSS gradients in your own work. 

 CSS Gradient Generator Tools