Design Atlas
한국어
✦ Visual effects

Text shimmer

텍스트 시머

A single bright band that repeatedly sweeps across otherwise plain-coloured text — the skeleton-loading shimmer, applied to the letters themselves.

Also known as: Shimmering headingText loading shine
···
html
<h1 class="shimmer-text">Generating your summary</h1>
css
.shimmer-text{margin:0;text-align:center;font-size:clamp(20px,5.6vmin,32px);font-weight:700;letter-spacing:-.01em;
  background:linear-gradient(100deg,var(--muted) 32%,#fff 50%,var(--muted) 68%);
  background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:shimmer 2.2s linear infinite}
@keyframes shimmer{0%{background-position:0% 0}100%{background-position:100% 0}}

Blend a muted grey text colour with a short stretch of bright white in a gradient, and confine it to the glyph shapes with background-clip: text. Set background-size far wider than the text itself and loop background-position, and a bright band appears to sweep across the letters.

Where gradient text puts colourful brand hues front and centre, text shimmer keeps the letters a plain grey and highlights only the passing band of light — which reads naturally as "this text is being generated right now," the same grammar as light flowing across a grey skeleton bar.

Compared to shine sweep: shine sweep lays its band over an opaque surface like a card, while text shimmer masks that same band to the shape of the letters.

When to use

Use for a heading while an AI response streams in, or a headline waiting on data. Stop the animation and revert to plain text colour once loading finishes — leaving it shimmering forever undermines the "done" signal.