Terminal Phosphor
Glitch & Distortion · Animated · pure CSS
Glowing CRT-monitor text with an irregular power-on flicker, like an old phosphor screen warming up and stuttering.
How it works
Terminal Phosphor is an animated glitch & distortion text effect rendered entirely in CSS. It works on a single element — just add the .text-effect class, with no extra HTML.
Controls
Terminal Phosphor exposes 3 dedicated controls — Hue, Glow and Flicker — 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
/* Terminal Phosphor — 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).
*/
.text-effect {
font-family: 'Major Mono Display', monospace;
font-weight: 700;
letter-spacing: 0px;
text-transform: none;
}
.text-effect {
color: hsl(95 55% 60%);
text-shadow: 0 0 3px hsl(95 45% 88%), 0 0 6px hsl(95 55% 60%);
animation: text-effect-phosphor 3.7s steps(1, end) infinite;
}
@keyframes text-effect-phosphor {
0%, 100% { opacity: 1; }
6% { opacity: 0.94; }
8% { opacity: 1; }
9% { opacity: 0.97; }
11% { opacity: 1; }
52% { opacity: 1; }
53% { opacity: 0.96; }
55% { opacity: 1; }
}
Pure CSS — just add the .text-effect class to any element.
- Category
- Glitch & Distortion
- Type
- Animated
- Browser support
- text-shadow glow + irregular opacity/brightness flicker
- Capabilities
- pure