What's the difference between this and a regular animated gradient text?

A drifting multi-color gradient blends several hues across the whole word continuously, while a shimmer effect keeps the text mostly one base tone and sweeps a single narrow, bright highlight band across it — that narrow band with a sharp base-highlight-base transition is what reads as a light reflection rather than a color blend.

How do you make it look metallic instead of just shiny?

Metallic text usually mixes two or three closely related base shades (like a mid-gray and a lighter gray for silver, or two golds) rather than one flat color, so the surface already looks like it has some depth before the highlight sweeps across it — the presets use this multi-tone base for that reason.

What controls how fast or sharp the 'shine' looks?

Sweep width narrows or widens the highlight band's gradient stops — a narrow band (a few percent) gives a crisp glint, a wide one gives a softer glow — and speed controls how quickly background-position animates across the oversized gradient.

Does this need any images or a mask?

No — it's a single animated CSS gradient clipped to the text with background-clip: text, no separate image, SVG mask, or JavaScript required.

Is this generated locally?

Yes, entirely client-side, and the animation is wrapped in @media (prefers-reduced-motion: reduce) so it can fall back to a static shimmer position.

CSS SHIMMER / METALLIC TEXT GENERATOR

Sweep a bright highlight band across text for a polished metallic shine — calculated right here in your browser.

Shimmer

Your text

Base tones

Base 1

Base 2

Highlight

Sweeping band color

Angle: 100deg

Band width: 8

Speed: 2.5s

Presets

HTML

<span class="shimmer-text">Shimmer</span>

CSS

.shimmer-text {
  background: linear-gradient(100deg, #9a9a9a 0%, #d4d4d4 42%, #ffffff 50%, #d4d4d4 58%, #9a9a9a 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: shimmer-sweep 2.5s linear infinite;
}

@keyframes shimmer-sweep {
  0% { background-position: 0% 0; }
  100% { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .shimmer-text {
    animation: none;
    background-position: 50% 0;
  }
}

How to build a shimmer text effect

1
Type your text.
2
Pick a metal preset — silver, gold, rose gold, or your own base color.
3
Adjust the highlight band's width and angle to control how sharp the sweep looks.
4
Set the sweep speed.
5
Copy the HTML and CSS.

Questions

What's the difference between this and a regular animated gradient text?: A drifting multi-color gradient blends several hues across the whole word continuously, while a shimmer effect keeps the text mostly one base tone and sweeps a single narrow, bright highlight band across it — that narrow band with a sharp base-highlight-base transition is what reads as a light reflection rather than a color blend.
How do you make it look metallic instead of just shiny?: Metallic text usually mixes two or three closely related base shades (like a mid-gray and a lighter gray for silver, or two golds) rather than one flat color, so the surface already looks like it has some depth before the highlight sweeps across it — the presets use this multi-tone base for that reason.
What controls how fast or sharp the 'shine' looks?: Sweep width narrows or widens the highlight band's gradient stops — a narrow band (a few percent) gives a crisp glint, a wide one gives a softer glow — and speed controls how quickly background-position animates across the oversized gradient.
Does this need any images or a mask?: No — it's a single animated CSS gradient clipped to the text with background-clip: text, no separate image, SVG mask, or JavaScript required.
Is this generated locally?: Yes, entirely client-side, and the animation is wrapped in @media (prefers-reduced-motion: reduce) so it can fall back to a static shimmer position.