Erik D. Kennedy notes an interesting phenomenon of color gradients. If you have a gradient between two colors where the line between them in the color space goes through the zero-saturation middle, you get this “gray dead zone” in the middle.
It’s a real thing. See the gray middle here:
You can also see how colors might not do that, like red and blue here shooting right through purple instead, which you can visualize on that color circle above.
Erik says one solution can be taking a little detour instead of going straight through the gray zone:
His updated gradient tool deals with this by using different “interpolation modes” and easing the gradient with a choice of precision stops. Don’t miss the radial and conic options as well, with the ability to place the centers “offscreen” which can yield pretty cool looks you can’t do any other way.
Oh and speaking of conic gradients, Adam Argyle has a little gallery of possibilities that is pretty unique.
The post The “Gray Dead Zone” of Gradients appeared first on CSS-Tricks.
You can support CSS-Tricks by being an MVP Supporter.