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

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 through the loop. Three variants demonstrate a balanced spectrum hero, a warmer festival CTA, and a muted dashboard treatment.

Balanced color route

Spectrum Hero

A balanced full-spectrum band travels across large display text without using external image assets or replacing the accessible text node. Cool and warm stops repeat at both ends so the 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. Useful for promotional labels where the movement should feel expressive while the DOM text remains selectable.

  • CTA text
  • warm stops
  • no transform

Restrained dashboard color

Data Spectrum

A calmer variant lowers the glow and stretches the background span so dashboard text gets color without noisy flicker. Slower color pass works better for repeated UI surfaces because users can scan labels without chasing movement.

  • dashboard
  • slow loop
  • muted spectrum

Rainbow inspector

Spectrum Hero

  • rainbow bands
  • live text
  • contrast guard

A balanced full-spectrum band travels across large display text without using external image assets or replacing the accessible text node. Cool and warm stops repeat at both ends so the background-position can loop without a hard seam.

.gradient-text {
  /* Static fallback for engines without background-clip: 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;
    filter: drop-shadow(0 0 14px rgba(244, 114, 182, 0.26));
    animation: gradient-text-sweep 4.80s linear infinite;
  }
}

@keyframes gradient-text-sweep {
  from { background-position: 0% 50%; }
  to   { background-position: 100% 50%; }
}

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