TEXT EFFECTS

Shimmer Text Effect

A smooth shimmer text effect with a bright light sweep moving across the letters. Copy the HTML and CSS for your own project.

CodeRipple

HTML
<h2 class="shimmer-text">
  CodeRipple
</h2>
CSS
.shimmer-text{
  margin:0;
  font-size:64px;
  font-weight:800;
  line-height:1.1;

  background:linear-gradient(
    110deg,
    #64748b 20%,
    #ffffff 40%,
    #22d3ee 50%,
    #ffffff 60%,
    #64748b 80%
  );

  background-size:250% 100%;
  background-position:150% 0;

  background-clip:text;
  -webkit-background-clip:text;

  color:transparent;
  -webkit-text-fill-color:transparent;

  animation:shimmerMove 2.5s linear infinite;
}

@keyframes shimmerMove{
  0%{
    background-position:150% 0;
  }

  100%{
    background-position:-150% 0;
  }
}

How This Shimmer Text Effect Works

The Shimmer Text Effect creates a moving light sweep across the text by combining a multi-color linear gradient with animated background positioning. The HTML stays simple, using a single heading element with the shimmer-text class.

The text uses a linear-gradient with gray, white, and cyan color stops. This creates a bright center band surrounded by darker tones, which forms the visible shimmer.

The gradient is enlarged with background-size: 250% 100%, giving it enough extra width to move smoothly across the letters.

background-clip: text and -webkit-background-clip: text limit the gradient to the shape of the characters, while the text fill itself stays transparent. You can learn more about clipping backgrounds to text in the MDN Web Docs guide to background-clip.

The shimmerMove animation shifts the background position from 150% to -150%, moving the bright gradient band across the text from one side to the other.

The animation runs for 2.5s with linear timing and repeats infinitely, creating a continuous shimmer without requiring JavaScript.

Customizing This Shimmer Text Effect

You can customize the Shimmer Text Effect by changing a few CSS values while keeping the same HTML structure. The gradient colors, sweep width, animation speed, and text size can all be adjusted.

  • Shimmer colors: Change #64748b, #ffffff, and #22d3ee to match your design.
  • Gradient angle: Adjust 110deg to change the direction of the light sweep.
  • Shimmer width: Change background-size: 250% 100% to make the moving gradient wider or narrower.
  • Animation speed: Adjust 2.5s for a faster or slower shimmer.
  • Text size: Change 64px to fit different heading sizes.
  • Sweep range: Adjust the 150% and -150% background positions to control how far the shimmer travels.

Where to Use This Shimmer Text Effect

The Shimmer Text Effect works well for short headings and highlighted text where a continuous light sweep can attract attention without requiring complex animation.

  • Hero headings: Add a moving highlight to important titles.
  • Landing pages: Draw attention to promotional messages or featured text.
  • Portfolio websites: Use it for project titles or creative headings.
  • Loading screens: Add subtle motion to short loading messages.
  • Feature sections: Highlight important labels or product features.
  • Dark interfaces: The white and cyan shimmer creates strong contrast against dark backgrounds.

Because the effect uses CSS gradients, background clipping, and keyframe animation, it runs without JavaScript and remains easy to reuse.

If you want another animated typography style, check out the Split Text Hover Effect, which separates the top and bottom halves of the text to reveal a colorful center layer.

Frequently Asked Questions

Does the Shimmer Text Effect require JavaScript?
No. The moving shimmer is created entirely with CSS gradients and keyframe animation.

How does the shimmer move across the text?
The shimmerMove animation changes the gradient’s background-position from 150% to -150%, creating the moving light sweep.

Can I change the shimmer colors?
Yes. You can replace the gray, white, and cyan colors inside the linear-gradient with your own colors.

Can I make the shimmer animation faster or slower?
Yes. Change the 2.5s animation duration to control the speed of the shimmer.

The Shimmer Text Effect combines an animated gradient, transparent text fill, and smooth background movement to create a continuous light sweep across the letters. Its CSS-only structure keeps it lightweight and easy to customize for hero headings, landing pages, portfolios, loading screens, and modern interfaces.

Scroll to Top