← Back to gallery
CSS

Gradient-Clipped Rainbow Text

A multicolor linear-gradient clipped into real text, with restrained color stops, readable fallback color, and reduced-motion static spectrum fallback.

Duration
6s
Resolution
1440×900
Format
CSS
rainbow-textgradient-textbackground-cliptext-fillaccessibility

Gradient Text / Clipped Color Bands

Gradient-Clipped Rainbow Text

A multicolor background is clipped into live text, with restrained color stops and a dark backing surface so the label remains readable during the whole loop.

spectrum hero spectrum pass active

Balanced color route

Spectrum Hero

A full-spectrum band travels across large display text without using external image assets or replacing the accessible text node.

The gradient repeats cool and warm stops at both ends so background-position can loop without a hard seam.

  • rainbow bands
  • live text
  • contrast guard

Higher energy label

Festival CTA

A brighter CTA treatment uses warmer middle stops but keeps a stable fallback color and no layout-affecting transforms.

Warm magenta and amber occupy the center while cyan and green restart the loop at the edges.

  • CTA text
  • warm stops
  • no transform

Restrained dashboard color

Data Spectrum

A calmer rainbow variant lowers the glow and stretches the background so dashboard text gets color without noisy flicker.

Lower-chroma stops move across a wider background span to reduce rapid color shifts.

  • dashboard
  • slow loop
  • muted spectrum

Rainbow inspector

Spectrum Hero

Gradient logic
The gradient repeats cool and warm stops at both ends so background-position can loop without a hard seam.
Fallback
Unsupported clipping falls back to a pale blue foreground, avoiding transparent text in older engines.

Keep the background surface dark and the saturation moderated so every color frame still has enough contrast to read.

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

@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .gradient-text {
    background-image: linear-gradient(90deg, #67e8f9 0%, #a78bfa 18%, #f472b6 34%, #fbbf24 50%, #34d399 66%, #67e8f9 82%, #a78bfa 100%);
    background-size: 300% 100%;
    background-position: 0% 50%;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 14px rgba(244, 114, 182, 0.26);
    animation: gradientTextSweep 6.0s 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%;
  }
}