← All effects

Gradient Shine

TextVanilla JS · zero dependenciesCSS backgrounds · no canvas
-- fps
prefers-reduced-motion detected — gradient shown, no sweep

X-ray · layers

color painted into the letters
a band of light passes through
breathing room between passes

Parameters

Your text 
Sweep duration1400 ms
Band width18%
Pause between1200 ms
Shine strength0.90
your version · updates as you tinker

How this effect works

The trick is that the letters are a window, not a surface. With background-clip: text and a transparent text color, whatever you paint as the element's background shows through the letter shapes — so the gradient isn't on the text, it's behind it, cropped to it. Turn the gradient layer off and the window shows plain light gray instead; the mechanics stay identical.

The shine is simply a second background image stacked on top: a narrow bright band inside a transparent gradient, two and a half times wider than the text. Every frame we nudge its background-position, so the band slides across the window. The pause layer is what separates "expensive watch ad" from "police siren" — light that passes, rests, then passes again reads as deliberate; light that loops non-stop reads as noise.

Production notes: respects prefers-reduced-motion (static gradient, no sweep) · the animation only moves a background-position on one element — cheap even on weak devices · your text goes in via textContent, never raw HTML · the copied snippet is self-contained HTML + CSS + JS.