This content originally appeared on Bram.us and was authored by Bramus!
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.
This content originally appeared on Bram.us and was authored by Bramus!
Bramus! | Sciencx (2021-12-20T22:38:22+00:00) Easing Gradients. Retrieved from https://www.scien.cx/2021/12/20/easing-gradients/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.