Candy Stripe
Retro & Themed · Animated · pure CSS
Diagonal candy-cane stripes filling the glyphs via a repeating gradient clip. Sweet, festive and fully recolorable.
CSS
/* Candy Stripe — 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: 400;
letter-spacing: 8px;
text-transform: none;
}
.text-effect {
background: repeating-linear-gradient(135deg, hsl(350 90% 55%) 0, hsl(350 90% 55%) 6.5px, hsl(350 60% 96%) 6.5px, hsl(350 60% 96%) 13px);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
background-size: 52px 52px;
filter: drop-shadow(0 0 6px hsl(350 90% 55% / 0.55));
animation: text-effect-march 6.8s linear infinite;
}
@keyframes text-effect-march {
0% { background-position: 0 0; }
100% { background-position: 52px 0; }
}
Pure CSS — just add the .text-effect class to any element.
- Category
- Retro & Themed
- Type
- Animated
- Browser support
- background-clip:text (all modern, -webkit- prefixed)
- Capabilities
- pure