Shiny Text — Free HTML CSS Animated Shimmer Text Snippet

Shiny text is the subtle shimmer seen on "Introducing" badges and premium headlines: the text sits in a muted gray, and a soft band of light glides across it repeatedly, like a sheen catching the letters. This snippet builds it with pure CSS — no pseudo-elements, no JavaScript for the shine — plus a small script for accessibility and runtime tuning.

A gradient clipped to the text

The shine is a single trick: the text color is set to transparent and filled with a linear-gradient via background-clip: text, so the gradient shows through the letter shapes. The gradient is mostly the muted base gray with a bright white band in the middle, and it is sized at 220% width so there is room to slide. Because background-clip: text paints the gradient into the glyphs, the bright band only appears where there are letters — exactly the sheen effect.

Animating the sweep

The stShine keyframe animates background-position from one side to the other, dragging the bright band across the text on a 3-second linear loop. Since the rest of the gradient is the same muted gray on both ends, the band slides in from one edge and out the other with no visible seam — it reads as a continuous, repeating glint. This is far cheaper than a masked overlay or a JavaScript animation, because only background-position changes and the browser composites it efficiently.

Reusable on any text

The effect is a single class, .st-shiny, applied to whatever you want to shimmer — here both a pill badge and a large headline. Because it only touches color and background, you can drop it onto links, buttons, headings, or inline spans without changing their layout. The demo badge also nudges its arrow on hover, a common pattern for "new feature" announcement chips.

Respecting reduced motion

Continuous shimmer can be distracting, so the script checks prefers-reduced-motion via matchMedia and, when set, removes the animation and restores a solid readable color on every shiny element. This keeps the text legible and calm for users who have asked for less motion — the accessible default for any looping decorative effect.

Runtime control

A tiny window.shinyText.speed(seconds) helper lets you retune the sweep speed at runtime by updating the animation duration on all shiny elements. It is optional — the effect works without any JavaScript — but it is handy if you want the shimmer to speed up on interaction or differ between elements.

Why background-clip over a mask

Some shimmer effects use a moving highlight with mix-blend-mode or a clipped overlay element. Clipping a gradient to the text is simpler and more robust: it needs no extra DOM, automatically follows the exact letter shapes including descenders and serifs, and works on multi-line text. The only caveat is that the text must be transparent, so provide a solid fallback color (as the reduced-motion branch does) for contexts where the clip is unsupported.

Customizing it

Adjust the gradient stops to widen or sharpen the bright band, change the 220% size and the keyframe range to alter how far it travels, retime the loop, or recolor the base and highlight (a gold base with a white band reads as metallic). Pair it with a retro grid hero or a border beam card for a polished announcement.