Shimmer headline
A gradient sliding behind the letters, clipped to the glyphs. Three CSS properties do the whole thing; the interesting decisions are the timing function and where the gradient loops.
- Gradient 100deg, 6 stops, first = last
- background-size 320% 100%
- Duration 8s linear infinite
Codice
<!doctype html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Shimmer headline</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
min-height: 100vh;
display: grid; place-items: center;
padding: 0 8%;
background: radial-gradient(90% 80% at 50% 40%, #14141f, #08080d 75%);
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", sans-serif;
text-align: center;
overflow: hidden;
}
.stack { display: grid; justify-items: center; gap: 16px; }
.eyebrow {
font-size: 10.5px; font-weight: 600;
letter-spacing: 0.22em; text-transform: uppercase;
color: #ffffff54;
}
.sub { font-size: 12.5px; color: #ffffff47; letter-spacing: 0.01em; }
h1 {
font-size: clamp(28px, 7vw, 54px);
font-weight: 700;
letter-spacing: -0.035em;
line-height: 1.04;
text-wrap: balance;
/* The three lines that matter: paint a gradient as the background,
clip it to the glyphs, make the text itself transparent.
The letters are a window; what moves is the cloth behind them. */
background: linear-gradient(100deg, #0a84ff, #bf5af2, #ff375f, #ff9f0a, #00c2a8, #0a84ff);
background-size: 320% 100%;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
/* linear, not ease. This is light travelling at a constant speed,
not a gesture with a beginning and an end — ease would make it
hesitate at both ends and read as a stutter. */
animation: shimmer 8s linear infinite;
}
/* First and last stop are the same colour (#0a84ff), so travelling the
full 320% lands exactly back at the start and the seam is invisible. */
@keyframes shimmer { to { background-position: 320% 0; } }
@media (prefers-reduced-motion: reduce) {
h1 { animation: none; background-position: 30% 0; }
}
</style>
<div class="stack">
<span class="eyebrow">Gradient text</span>
<h1>Software with<br>a point of view</h1>
<span class="sub">the letters stay still — the gradient behind them moves</span>
</div>Prompt
Animate a headline with a gradient shimmer. Apply a linear-gradient(100deg, ...) with six colour stops where the first and last stop are the same colour, set background-size: 320% 100%, background-clip: text (with the -webkit- prefix) and color: transparent. Animate background-position from 0 to 320% 0 over 8s with a linear timing function, infinite. Do not use ease — the motion must be constant-speed. Under prefers-reduced-motion: reduce, disable the animation and freeze background-position at 30% so the text keeps its colour instead of going transparent.