A gradient that's wider than the text and slides across forever. Color flows through the letters. Different from the static gradient text in 5.4.
The static gradient-text technique (5.4) clipped a fixed gradient to text shape. This animates the background position so the gradient endlessly flows through the letters. Used on AI-product hero headlines (the rainbow-iridescent text on Apple Intelligence, OpenAI, Anthropic, every modern AI launch), and on premium product pages where the headline literally needs to shimmer.
Apply background-image: linear-gradient(...) with multiple colors AND background-size: 300% 100% (much wider than the element). Clip to text with background-clip: text; color: transparent. Then animate the background-position from 0% to -300% with infinite linear keyframes. The gradient flows from right to left across the letters. Variants: conic-gradient + hue-rotate for rainbow spin; horizontal shimmer (narrow white band sweeping); vertical pump (color shifts top-to-bottom).
The gradient is 3× wider than the text and slides forever. Multi-color stops give an iridescent flow through the letters.
Build animated gradient text. On a span inside a hero headline, apply: background-image:linear-gradient(90deg, hot-pink #FF6B9D, violet #7C5CFF, cyan #00D9FF, amber #FFB800, hot-pink #FF6B9D); background-size:300% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; font-style:italic. Add @keyframes named "flow" that animates background-position from 0% 50% to -300% 50% over 6 seconds linear infinite. The gradient flows endlessly from right to left through the text. Notice the gradient must end on the same color it starts on for seamless looping. Also show 3 variants in cards: (1) conic-gradient + filter:hue-rotate(0 → 360deg) for rainbow spin; (2) narrow shimmer — gradient is mostly white with a single hot-pink stripe, background-size:200% 100%, background-position oscillates between 100% and -100% for a sweep effect; (3) vertical pump — 180deg gradient cyan→pink, background-size:100% 200%, background-position-Y alternates 0% → 100% with ease-in-out infinite alternate.