Web design effects

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.

How it works

Numbers

Gradient
100deg, 6 stops, first = last
background-size
320% 100%
Duration
8s linear infinite
Reduced motion
freeze at background-position: 30%

Prompt

Paste this into any coding model to get the effect from scratch. It states every number explicitly — vague words like “smooth” or “modern” produce a different result every time.

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.

Source

The whole file. It is what the sample above is running — copy it into an .html file and it works with nothing else.

shimmer-headline.html
<!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>

Where it breaks