← Back to gallery
CSSFeatured

Gradient Text Sweep

A fallback-safe background-clip text treatment where an explicit two-axis gradient background sweeps a narrow highlight band across live, selectable headline text.

Duration
5s
Resolution
1440×900
Format
CSS
gradient-textbackground-clipbackground-sizebackground-positionprefers-reduced-motion

Gradient Text / Background Sweep

Gradient Text Sweep

Live text keeps a readable fallback color, then uses background-clip:text with explicit two-axis background-size so the highlight band can pass across long headlines without layout shift.

launch headline highlight sweep active

Wide hero phrase

Launch Headline

A broad cyan-white band moves through a large product headline while the fallback color remains legible before clip support applies.

A 104deg gradient repeats the base color at both edges and reserves a narrow bright center band for the passing highlight.

  • background-size
  • clip text
  • hero headline

Compact product UI

Command Label

A shorter sweep keeps utility labels crisp and avoids extra padding around the text box so the gradient tracks the glyphs tightly.

The sweep uses amber and cyan flanks with a small white core to make the movement visible on compact text.

  • status copy
  • tight box
  • utility UI

Longer scanning line

Editorial Kicker

A slower diagonal pass leaves enough dwell time for longer text to stay readable while the shine crosses the full phrase.

A 112deg sweep gives the highlight a taller diagonal path, which helps wider phrases feel less mechanical.

  • long headline
  • slower loop
  • readability

Sweep inspector

Launch Headline

Gradient logic
A 104deg gradient repeats the base color at both edges and reserves a narrow bright center band for the passing highlight.
Fallback
The plain text color is declared first, then text clipping is gated in @supports so unsupported browsers do not render transparent text.

Use this when a landing or catalog header needs one controlled pass of brightness rather than a constantly changing rainbow.

css
.gradient-text {
  color: #dbeafe;
}

@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .gradient-text {
    background-image: linear-gradient(104deg, #9fb2d8 0%, #e2e8f0 36%, #67e8f9 46%, #ffffff 50%, #67e8f9 54%, #e2e8f0 64%, #9fb2d8 100%);
    background-size: 260% 100%;
    background-position: 0% 50%;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 16px rgba(103, 232, 249, 0.34);
    animation: gradientTextSweep 4.4s linear infinite;
  }
}

@keyframes gradientTextSweep {
  from { background-position: 0% 50%; }
  to { background-position: 100% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .gradient-text {
    animation: none;
    background-position: 55% 50%;
  }
}