Flowing Gradient Text

A warm gradient runs slowly through the letters of a headline, so it keeps a little life without moving at all.

CSS
Text
Loop
Added 2026-10-29

Made to move

AI prompt

Create a headline with a gradient that flows through the letters in pure CSS. Set background to a linear-gradient at 90deg with four stops that repeat the first colour at the end (accent, warm yellow, light ink, accent), background-size 300% 100%, and clip it to the text with background-clip: text and color: transparent. Animate background-position from 0% to 300% over 6s linear infinite, so the loop is seamless. Use a bold display font so the gradient has room to show. Under prefers-reduced-motion, keep the gradient still. The text reads "Made to move".

Source

Demo.tsx

'use client'

import s from './demo.module.css'

export default function GradientText({ labels }: { labels: Record<string, string> }) {
  return <p className={s.text}>{labels.text}</p>
}

demo.module.css

.text {
  margin: 0;
  font: 700 clamp(2rem, 7vw, 2.75rem) / 1.1 var(--font-display);
  letter-spacing: -0.02em;
  background-image: linear-gradient(90deg, var(--stage-accent), oklch(86% 0.13 85), var(--stage-ink), var(--stage-accent));
  background-size: 300% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  animation: flow 6s linear infinite;
}

@keyframes flow {
  from { background-position: 0% 50%; }
  to { background-position: 300% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .text { animation: none; }
}