CSS Snippet:
Rainbow Shine Text
This CSS snippet creates a rainbow gradient text effect with an animated shine streak moving across it. The shine is built directly into the gradient, allowing the text to keep its bold rainbow colour while adding a moving highlight that feels slick and polished.
It’s a more dynamic version of standard rainbow text, designed for headings that need extra personality and movement.
Difficulty:
Intermediate
Live preview
Rainbow Text Shine
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 a heading to feel energetic, playful, and more visually premium than a static gradient.
It works particularly well for hero headings, featured promotions, or standout text that needs a bit more movement and personality.
Where to apply it
Apply this class to heading text only.
Common examples include:
• Hero headings
• Promotional banners
• Featured section titles
• Event or campaign headlines
This style is best used sparingly so the animation feels intentional and keeps its impact.
Notes & Setup
Select your heading text in Wix Studio.
Add the class: rainbow-shine-text
Paste the CSS into your site's Custom CSS section.
This style works best on larger headings where the rainbow colours and moving shine have enough room to show clearly.
Because the shine is animated, it should be used on key headings rather than repeated throughout the page.
Customisation
Animation Speed:
To make the shine faster or slower, adjust the timing value here:
animation: rainbowShineMove 3s linear infinite;
Lower values = faster shine
Higher values = slower, more premium movement
Shine Width:
The white highlight is controlled by these stops in the gradient:
rgba(255,255,255,0) 78%,
rgba(255,255,255,1) 82%,
rgba(255,255,255,0) 86%,
Move these values closer together for a tighter shine, or further apart for a wider streak.
Colours:
You can replace the rainbow colours with any palette you like, but keeping strong contrast will make the shine effect more visible.
Tip:
This style works best on bold heading text. On smaller text, the shine will be harder to notice and may feel too busy.
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
.rainbow-shine-text {
background: linear-gradient(
110deg,
#e40303 0%,
#ff8c00 12%,
#ffed00 24%,
#008026 36%,
#004dff 48%,
#750787 60%,
#b5179e 72%,
rgba(255,255,255,0) 78%,
rgba(255,255,255,1) 82%,
rgba(255,255,255,0) 86%,
#e40303 92%,
#ff8c00 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: rainbowShineMove 3s linear infinite;
}
@keyframes rainbowShineMove {
from {
background-position: 0% 0%;
}
to {
background-position: 200% 0%;
}
}
