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 →

Published by Bramus!

Bramus is a frontend web developer from Belgium, working as a Chrome Developer Relations Engineer at Google. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Leave a comment

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.