Lightning
Elemental & Nature · Animated · pure CSS
A cold electric-white core with a charged blue glow that crackles — erratic flicker with sudden bright spikes. Snappier than a steady neon.
CSS
/* Lightning — generated with TEXT-FX
* HTML: just put the class on any element.
* Font: 'Bungee', cursive (load from Google Fonts).
*/
.text-effect {
font-family: 'Bungee', cursive;
font-weight: 900;
letter-spacing: 0px;
text-transform: uppercase;
}
.text-effect {
color: hsl(199 90% 82%);
text-shadow: 0 0 5.6000000000000005px #fff, 0 0 14px hsl(199 100% 60%), 0 0 28px hsl(199 100% 60%);
animation: text-effect-spark 2.1s steps(1, end) infinite;
}
@keyframes text-effect-spark {
0%, 100% { opacity: 0.92; filter: brightness(1); }
8% { opacity: 1; filter: brightness(1.8); }
10% { opacity: 0.5; filter: brightness(0.8); }
12% { opacity: 1; filter: brightness(1.6); }
14% { opacity: 0.85; filter: brightness(1); }
60% { opacity: 0.9; }
62% { opacity: 1; filter: brightness(1.9); }
64% { opacity: 0.6; }
66% { opacity: 1; filter: brightness(1); }
}
Pure CSS — just add the .text-effect class to any element.
- Category
- Elemental & Nature
- Type
- Animated
- Browser support
- text-shadow glow + erratic flicker with bright spikes
- Capabilities
- pure