Rainbow Fill
Gradient Fill · Static · pure CSS
Full-spectrum rainbow piped through the letters with background-clip:text. Playful and instantly eye-catching; angle and saturation are adjustable.
CSS
/* Rainbow Fill — generated with TEXT-FX
* HTML: just put the class on any element.
* Font: 'Major Mono Display', monospace (load from Google Fonts).
*/
.text-effect {
font-family: 'Major Mono Display', monospace;
font-weight: 900;
letter-spacing: 2px;
text-transform: none;
}
.text-effect {
background: linear-gradient(140deg, hsl(0 78% 62%) 0%, hsl(60 78% 62%) 17%, hsl(120 78% 62%) 33%, hsl(180 78% 62%) 50%, hsl(240 78% 62%) 67%, hsl(300 78% 62%) 83%, hsl(0 78% 62%) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
Pure CSS — just add the .text-effect class to any element.
- Category
- Gradient Fill
- Type
- Static
- Browser support
- background-clip:text (all modern, -webkit- prefixed)
- Capabilities
- pure