← 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.

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.

Motion Library

Wide hero phrase

Launch Headline

A broad cyan-white band moves through a large product headline while the fallback color stays legible before clip support applies. Use for landing / catalog headers that want one controlled brightness pass instead of constant rainbow motion.

  • hero headline
  • background-clip
  • fallback color

Deploy Preview

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. Good for empty states and command surfaces where text should feel active without becoming decorative.

  • utility label
  • tight box
  • amber + cyan

Reusable CSS Motion

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. Wider band-width avoids visible jumps when the background-position wraps.

  • long phrase
  • slow pass
  • violet + cyan

Sweep inspector

Launch Headline

Motion Library

  • hero headline
  • background-clip
  • fallback color

A broad cyan-white band moves through a large product headline while the fallback color stays legible before clip support applies. Use for landing / catalog headers that want one controlled brightness pass instead of constant rainbow motion.

.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.8s 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%;
  }
}