Vaporwave
Retro & Themed · Animated · pure CSS
A pink-to-cyan gradient title with a soft, dreamy glow. The signature 80s/synthwave aesthetic in pure CSS.
CSS
/* Vaporwave — generated with TEXT-FX
* HTML: just put the class on any element.
* Font: 'Space Grotesk', sans-serif (load from Google Fonts).
*/
.text-effect {
font-family: 'Space Grotesk', sans-serif;
font-weight: 700;
letter-spacing: -2px;
text-transform: none;
}
.text-effect {
background: linear-gradient(115deg, hsl(301 95% 68%) 0%, hsl(319 92% 62%) 40%, hsl(101 90% 66%) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
background-size: 200% 100%;
filter: drop-shadow(0 0 18px hsl(301 100% 62% / 0.85)) drop-shadow(0 0 36px hsl(301 100% 62% / 0.85));
animation: text-effect-drift 9.2s ease-in-out infinite;
}
@keyframes text-effect-drift {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
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