CSS Snippet:
Shimmer Text
This CSS snippet creates a moving shimmer effect across heading text using an animated gradient.
The result feels clean, polished, and slightly luxurious, making it ideal for headings that need motion without looking overly playful.
Difficulty:
Intermediate
Live preview
Shimmer Text
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Use case
Use this text style when you want subtle animation that adds energy without overwhelming the design.
It works particularly well for premium hero sections, featured statements, and polished landing page headings.
Where to apply it
Apply this class to heading text only.
Common examples include:
• Hero headings
• Premium feature sections
• Product launches or announcements
• Luxury-style landing pages
This style works best when used selectively so the motion keeps its impact.
Notes & Setup
Select your heading text in Wix Studio.
Add the class: shimmer-text
Paste the CSS into your site's Custom CSS section.
This style works best on larger headings where the moving highlight has enough room to be seen clearly.
Customisation
Animation Speed:
To speed up or slow down the shimmer, adjust:
animation: shimmerTextMove 2.8s linear infinite;
Lower values = faster shimmer
Higher values = slower, more premium feel
Colours:
Replace the greys and white with your own palette if you want a coloured shimmer effect.
Tip:
This style works best on bold headings. On smaller text, the animation becomes harder to notice.
Licensing
This CSS snippet is free to use in personal and commercial Wix Studio projects. You’re welcome to copy, adapt, and use it on client or business websites.
Credit is not required, but if you found it useful, we’d really appreciate a small link back to Wix Doctor, ideally on your site’s footer, about page, credits page or wherever feels appropriate.
Linking back helps more Wix users discover the library and supports the continued creation of free snippets, tutorials, and community resources.
CSS Code
css
.shimmer-text {
background: linear-gradient(
110deg,
#94a3b8 0%,
#e2e8f0 18%,
#ffffff 28%,
#e2e8f0 38%,
#94a3b8 100%
);
background-size: 200% 100%;
background-position: 0% 0%;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
display: inline-block;
animation: shimmerTextMove 2.8s linear infinite;
}
@keyframes shimmerTextMove {
from {
background-position: 0% 0%;
}
to {
background-position: 200% 0%;
}
}
