An issue with linear gradients in CSS is that they often have hard edges where they start and/or end or transition from one color to the other. In 2017, Andreas Larsen wrote about them on CSS-Tricks, eventually leading him to create a nice editor to generate them.
Sparked by that post, a CSSWG Issue to discuss them was created. The issue lingered on for quite some time, but early September 2020 the syntax was agreed upon:
#future {
linear-gradient(
to bottom,
hsla(330, 100%, 45%, 1),
ease-in-out,
hsla(210, 100%, 45%, 1)
);
};
After September the issue went stale again though. The spec still remains unchanged and — lacking a spec — no browsers are working on it. In the meantime we can use Andreas’s tool to manually generate them, or make use of the postcss-easing-gradients
PostCSS plugin.