Easing Gradients

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.

Linear Gradients →