Plasma Energy
Gradient Fill · Animated · pure CSS
The word as contained ball-lightning: a conic gradient clipped to the glyphs spins on an animated @property angle while a second @property cycles every hue at once, so the swirl never settles into a tidy colour wheel. A white-hot core and a breathing magenta-to-cyan drop-shadow glow make it read as humming, ionised energy.
How it works
Plasma Energy is an animated gradient fill text effect rendered entirely in CSS. It animates a registered CSS @property, which keeps the motion smooth and GPU-friendly.
Controls
Plasma Energy exposes 3 dedicated controls — Energy Hue, Swirl Speed and Glow — on top of the shared type controls (font, weight, letter-spacing and case). Open it in the generator to tune every value live, then copy the updated CSS.
CSS
/* Plasma Energy — made with TEXT-FX · https://text-fx.app
* HTML: just put the class on any element.
* Font: 'Major Mono Display', monospace (load from Google Fonts).
*/
@property --text-effect-angle {
syntax: "<angle>";
inherits: false;
initial-value: 0deg;
}
@property --text-effect-hue {
syntax: "<number>";
inherits: false;
initial-value: 209;
}
.text-effect {
font-family: 'Major Mono Display', monospace;
font-weight: 700;
letter-spacing: 0px;
text-transform: uppercase;
}
.text-effect {
--text-effect-angle: 0deg;
--text-effect-hue: 209;
background: radial-gradient(circle at 54% 40%, hsl(var(--text-effect-hue) 100% 96% / 0.92) 0%, hsl(var(--text-effect-hue) 100% 96% / 0) 46%), conic-gradient(from var(--text-effect-angle) at 46% 48%, hsl(var(--text-effect-hue) 95% 62%) 0deg, hsl(calc(var(--text-effect-hue) + 35) 100% 94%) 70deg, hsl(calc(var(--text-effect-hue) + 60) 95% 62%) 120deg, hsl(calc(var(--text-effect-hue) - 95) 100% 62%) 190deg, hsl(calc(var(--text-effect-hue) - 60) 100% 94%) 250deg, hsl(calc(var(--text-effect-hue) - 25) 95% 62%) 310deg, hsl(var(--text-effect-hue) 95% 62%) 360deg);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
filter: drop-shadow(0 0 5.0px hsl(239 100% 66% / 0.9)) drop-shadow(0 0 13.0px hsl(239 100% 66% / 0.9));
animation:
text-effect-spin 8.6s linear infinite,
text-effect-huecycle 11.6s ease-in-out infinite,
text-effect-pulse 4.3s ease-in-out infinite;
}
@keyframes text-effect-spin {
to { --text-effect-angle: 360deg; }
}
@keyframes text-effect-huecycle {
0% { --text-effect-hue: 209; }
25% { --text-effect-hue: 264; }
50% { --text-effect-hue: 209; }
75% { --text-effect-hue: 154; }
100% { --text-effect-hue: 209; }
}
@keyframes text-effect-pulse {
0%, 100% { filter: drop-shadow(0 0 5.0px hsl(239 100% 66% / 0.9)) drop-shadow(0 0 13.0px hsl(239 100% 66% / 0.9)); }
50% { filter: drop-shadow(0 0 9.5px hsl(139 100% 66% / 0.9)) drop-shadow(0 0 25.0px hsl(139 100% 66% / 0.9)); }
}
Pure CSS — just add the .text-effect class to any element.
- Category
- Gradient Fill
- Type
- Animated
- Browser support
- @property + background-clip:text + drop-shadow glow (Chrome/Edge/Safari 16.4+)
- Capabilities
- pure, property