I was reading an article recently that had some really nice graphic design examples. One piece that stood out was a poster that had a continuous gradient that filled the gaps between words in a block a text. I wondered if it could be achieved dynamically in CSS.

Below is my result. Note that this is purely an experiment and can be very poor performing in browsers other than Chrome. Even Chrome sometimes struggles to render. The reason is the use of multiple SVG filters applied to HTML via CSS to create the rounded text outline over the gradient behind. Check out the code in the CodePen at the bottom of the post.