Gradient Text Shine Effect CSS

A gradient runs through the text and slides sideways on a loop, giving a headline a moving highlight.

It works through background-clip set to text with a transparent fill color, so the gradient only shows inside the letter shapes. Animating background-position is what moves it. The gradient is deliberately wider than the element, which is what hides the restart.

It needs a heavy font weight to read properly. At lighter weights there is not enough letter surface for the gradient to show, and the effect mostly vanishes.