25 CSS Text Animations 08 / 25
CSS Shimmer Text Animation
A sweeping metallic shimmer passes across text using a moving conic or linear gradient highlight — the gold-foil effect of premium design.
The code
<div class="ta-08">
<div class="ta-08__stage">
<p class="ta-08__eyebrow">Limited Edition</p>
<h2 class="ta-08__title">Golden Hour</h2>
<p class="ta-08__sub">background-clip: text · animated shimmer gradient</p>
</div>
</div> <div class="ta-08">
<div class="ta-08__stage">
<p class="ta-08__eyebrow">Limited Edition</p>
<h2 class="ta-08__title">Golden Hour</h2>
<p class="ta-08__sub">background-clip: text · animated shimmer gradient</p>
</div>
</div>.ta-08, .ta-08 *, .ta-08 *::before, .ta-08 *::after {
margin: 0; padding: 0; box-sizing: border-box;
}
.ta-08 ::selection { background: #92400e; color: #fef3c7; }
.ta-08 {
--bg: #0a0806;
min-height: 100vh;
background: var(--bg);
display: flex;
align-items: center;
justify-content: center;
padding: 2rem;
font-family: 'Playfair Display', Georgia, serif;
}
.ta-08__stage { text-align: center; }
.ta-08__eyebrow {
font-size: 0.68rem;
letter-spacing: 0.4em;
text-transform: uppercase;
color: #78350f;
margin-bottom: 0.6rem;
}
.ta-08__title {
font-size: clamp(2.5rem, 8vw, 5rem);
font-weight: 700;
letter-spacing: 0.04em;
background-image: linear-gradient(
105deg,
#92400e 0%,
#b45309 20%,
#d97706 35%,
#fbbf24 43%,
#fef9c3 50%,
#fbbf24 57%,
#d97706 65%,
#b45309 80%,
#92400e 100%
);
background-size: 250% auto;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
background-position: 0% center;
animation: ta-08-shimmer 2.8s linear infinite;
}
.ta-08__sub {
font-size: 0.65rem;
color: #3f2a10;
margin-top: 1rem;
letter-spacing: 0.08em;
font-family: 'Courier New', monospace;
}
@keyframes ta-08-shimmer {
0% { background-position: 0% center; }
100% { background-position: 250% center; }
}
@media (prefers-reduced-motion: reduce) {
.ta-08__title { animation: none; background-position: 0% center; }
} .ta-08, .ta-08 *, .ta-08 *::before, .ta-08 *::after {
margin: 0; padding: 0; box-sizing: border-box;
}
.ta-08 ::selection { background: #92400e; color: #fef3c7; }
.ta-08 {
--bg: #0a0806;
min-height: 100vh;
background: var(--bg);
display: flex;
align-items: center;
justify-content: center;
padding: 2rem;
font-family: 'Playfair Display', Georgia, serif;
}
.ta-08__stage { text-align: center; }
.ta-08__eyebrow {
font-size: 0.68rem;
letter-spacing: 0.4em;
text-transform: uppercase;
color: #78350f;
margin-bottom: 0.6rem;
}
.ta-08__title {
font-size: clamp(2.5rem, 8vw, 5rem);
font-weight: 700;
letter-spacing: 0.04em;
background-image: linear-gradient(
105deg,
#92400e 0%,
#b45309 20%,
#d97706 35%,
#fbbf24 43%,
#fef9c3 50%,
#fbbf24 57%,
#d97706 65%,
#b45309 80%,
#92400e 100%
);
background-size: 250% auto;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
background-position: 0% center;
animation: ta-08-shimmer 2.8s linear infinite;
}
.ta-08__sub {
font-size: 0.65rem;
color: #3f2a10;
margin-top: 1rem;
letter-spacing: 0.08em;
font-family: 'Courier New', monospace;
}
@keyframes ta-08-shimmer {
0% { background-position: 0% center; }
100% { background-position: 250% center; }
}
@media (prefers-reduced-motion: reduce) {
.ta-08__title { animation: none; background-position: 0% center; }
}How this works
The shimmer is created by layering a linear-gradient with a narrow bright band (white at near-full opacity) sandwiched between the base text colour at lower opacity, then setting it as the background-image with background-clip: text. The gradient is sized much wider than the element — typically 300% auto — so that animating background-position from one side to the other sweeps the bright band across the text from left to right.
The base text colour on either side of the bright band is set slightly lower in saturation or opacity so there's a perceptible contrast difference as the highlight sweeps through. Timing uses a linear animation with a pause at the end — achieved by making the bright band travel quickly through the first 70% of the keyframe and then hold at the edge — so it feels like intermittent light catching the surface.
Customize
- Change the shimmer colour from white/silver to gold by replacing the highlight stop with
#ffd700or#f0c040for a luxury metallic feel. - Widen the shimmer band for a broader sweep by changing the gradient stop spread from
40%, 50%, 60%to35%, 50%, 65%. - Slow the shimmer to a lazy drift with
animation-duration: 3sor speed it to a flash at0.8sfor different optical illusions. - Apply to a gradient base text (not white) by using a multi-stop base gradient and inserting the shimmer band as a lighter version of one of the gradient colours.
- Trigger on hover only by moving the animation to a
:hoverselector so the shimmer plays once on mouse-over and stops when the cursor leaves.
Watch out for
- If
background-clip: textis missing the-webkit-prefix, the gradient renders as a background rectangle behind the text in most browsers. - The element needs
color: transparentfor the gradient to show — setting it to a partially transparent colour causes the gradient and text colour to blend unexpectedly. - On Safari, background-size and background-position interactions with background-clip: text can produce a clipping offset bug; always test and add a
background-repeat: no-repeatdeclaration.
Browser support
| Chrome | Safari | Firefox | Edge |
|---|---|---|---|
| 63+ | 8+ | 114+ | 63+ |
background-clip: text needs -webkit- prefix everywhere. Firefox support arrived in v114; use a solid colour fallback for older Firefox.
More from 25 CSS Text Animations
CSS Gradient Text AnimationCSS Glitch Text Effect AnimationCSS Neon Glow Text AnimationCSS Text Reveal Clip AnimationCSS Letter Spacing AnimationCSS Wave Text AnimationCSS Fade Up Stagger Text AnimationCSS 3D Text Flip AnimationCSS Text Stroke Draw AnimationCSS Bouncing Letters AnimationCSS Blur Reveal Text AnimationCSS Perspective Text Rotation Animation
View the full collection →