Have you ever noticed that gradients tend to look a little gray and washed-out in the middle? This happens because of a mathematical quirk with RGB colors. Fortunately, we can work around this quirk, and create beautiful, lush, saturated gradients.

Josh W. Comeau's platform provides resources in frontend development, React.js, and CSS, offering insightful articles, tutorials, and code examples. With a focus on accessible and creative web development techniques, Josh W. Comeau empowers developers to craft engaging user experiences and solve complex problems in the world of web development.

Josh W Comeau

In the RGB color space, we create colors by mixing three channels: red, green, and blue. All three channels converge towards their middle value, 127.5. By mixing two highly-saturated colors together, we wind up with gray. What if there was a way to mix only the pigment and keep the saturation consistent?

Make Beautiful Gradients

Link to this heading How gradients are calculated

Link to this heading Alternative color modes

Link to this heading Applying this knowledge

Link to this heading Introducing “Gradient Generator”

Nice gradients, the author also created a gradient’s generator to play with

Worth the read for the info and he takes the hard work out of the solution to crap gradients.

Love it, saved so much of my time. I also love the gradient generator.