Linear gradients are easy to create in CSS and are extremely useful. As we’ll go through in this article, we can make them visually much smoother by creating them with non-linear gradients. Well, non-linear in the easing sense, anyway!
Here’s an example that shows how harsh a standard linear-gradient() can be compared to how smooth we can make it by easing it:
Screencap from “The Good, the Bad and the Ugly" with gradients overlaid.
Il buono (the good): Smooth
Easing Linear Gradients is a post from CSS-Tricks