Rather than write out a complex linear-gradient property to the style tag, this approach with the #CSS Paint API uses a single numeric value. The gradient structure is offloaded to a #JavaScript worklet for cleaner code. Right now the Paint API works only in Chrome and Opera.
[codepen_embed height=”395″ theme_id=”dark” slug_hash=”EpPjEB” default_tab=”js,result” user=”mwilber”]See the Pen CSS Paint API Experiment: Animated Gradient by Matthew Wilber (@mwilber) on CodePen.[/codepen_embed]