I haven't ever before seen this kind of dynamic js-driven use of CSS custom properties. Using a custom property to set the gradient is genius! Saves you from writing a ton of CSS selectors for different values.
I'm also a big fan of the simplicity of your solution.
I'm a web developer, graphic designer, type designer, musician, comicbook-geek, LEGO-collector, food lover … as well as husband and father, located just south of Copenhagen, Denmark.
I haven't ever before seen this kind of dynamic js-driven use of CSS custom properties. Using a custom property to set the gradient is genius! Saves you from writing a ton of CSS selectors for different values.
I'm also a big fan of the simplicity of your solution.
Thank you! The principle is the same as my Range-collection and image compare – updating a single CSS Custom Property.