Flowing gradient text
A colour gradient slides endlessly through the letters using background-clip: text.
CSSBeginner
<h1>Flow</h1>h1{margin:0;font-size:clamp(2.6rem,12vw,6rem);font-weight:800;letter-spacing:-.04em;
color:#f08a5d; /* fallback */
background:linear-gradient(90deg,#f08a5d,#a8523a,#f3d9c8,#b07a6a,#d98a8a,#f08a5d);
background-size:300% 100%;
-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
animation:flow 6s linear infinite}
@keyframes flow{to{background-position:-300% 0}}
@media (prefers-reduced-motion:reduce){h1{animation:none}}<!doctype html>
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Gradient text</title>
<style>
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{display:grid;place-items:center;background:#140807;color:#fffffc;font:16px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif}
h1{margin:0;font-size:clamp(2.6rem,12vw,6rem);font-weight:800;letter-spacing:-.04em;
color:#f08a5d; /* fallback */
background:linear-gradient(90deg,#f08a5d,#a8523a,#f3d9c8,#b07a6a,#d98a8a,#f08a5d);
background-size:300% 100%;
-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
animation:flow 6s linear infinite}
@keyframes flow{to{background-position:-300% 0}}
@media (prefers-reduced-motion:reduce){h1{animation:none}}
</style></head>
<body><h1>Flow</h1></body></html>Good for
Hero words, brand names and highlighted phrases. Use sparingly.
Watch out for
Add a solid colour fallback before the transparent fill. Make the gradient repeat so the loop is seamless.
Accessibility
Wrap motion in @media (prefers-reduced-motion: reduce) and switch it off or shorten it for people who ask for less movement.