CSS Snippet:
Rainbow Text
This CSS snippet creates a smooth rainbow gradient across text using the classic ROYGBIV colour sequence. The colours blend into each other cleanly, giving headings a bright, playful, and polished look without feeling harsh.
It’s a simple but high-impact text effect that works especially well for bold, expressive headings.
Difficulty:
Easy
Live preview
Rainbow 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 a heading to feel bright, playful, and attention-grabbing.
It works particularly well for fun, expressive, or celebratory designs where a standard text colour would feel too flat.
Where to apply it
Apply this class to heading text only.
Common examples include:
• Hero headings
• Promotional banners
• Event or campaign titles
• Fun or expressive section headings
This style works best on larger text where the full colour gradient has room to show clearly.
Notes & Setup
Select your heading text in Wix Studio.
Add the class: rainbow-text
Paste the CSS into your site's Custom CSS section.
This style works best on larger headings with enough width for the rainbow gradient to display clearly.
You can change the angle of the gradient if you want a different look. For example, 90deg creates a left-to-right rainbow, while 135deg creates a more diagonal effect.
Customisation
Gradient Direction:
Change the gradient angle here:
linear-gradient(90deg, ...)
Examples:
• 90deg = left to right
• 135deg = diagonal
• 180deg = top to bottom
Colours:
The colours follow the ROYGBIV sequence, but you can replace them with any custom palette if you want a different style.
Tip:
This style works best on bold headings rather than body text. On smaller text, the gradient can become 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
.rainbow-text {
background: linear-gradient(
90deg,
#e40303 0%,
#ff8c00 16.6%,
#ffed00 33.2%,
#008026 49.8%,
#004dff 66.4%,
#750787 83%,
#b5179e 100%
);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
display: inline-block;
}
