LED Matrix
Fill & Texture · Animated · pure CSS
The word rendered as lit pixels on a dot-matrix scoreboard: an emissive radial-gradient LED grid clipped to the letters, glowing against a dark display board whose dimmer sockets sit unlit on the same grid. Classic red, amber or green hardware with a backlit bloom and a slow refresh scan.
How it works
LED Matrix is an animated fill & texture text effect rendered entirely in CSS. It works on a single element — just add the .text-effect class, with no extra HTML.
Controls
LED Matrix exposes 3 dedicated controls — LED Hue, Dot Pitch and Board — 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
/* LED Matrix — 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: -2px;
text-transform: uppercase;
}
.text-effect {
display: inline-block;
padding: 0.6em 0.85em;
border-radius: 0.3em;
background: radial-gradient(circle at center, hsl(3 24% 17%) 0, hsl(3 24% 17%) 2.4px, hsl(3 22% 11%) 4.4px, transparent 5.8px), linear-gradient(180deg, hsl(3 26% 9%), hsl(3 30% 5%));
background-size: 17px 17px, 100% 100%;
box-shadow: 0 0 28.9px hsl(3 100% 55% / 0.26), 0 6px 22px rgba(0, 0, 0, 0.45), inset 0 0 0 1px hsl(3 30% 24% / 0.5), inset 0 3px 10px rgba(0, 0, 0, 0.5);
}
.text-effect .fx-led {
display: inline-block;
background: linear-gradient(to bottom, transparent 47%, hsl(3 100% 82% / 0.22) 50%, transparent 53%), radial-gradient(circle at center, hsl(3 92% 92%) 0, hsl(3 92% 92%) 1.7px, hsl(3 98% 60%) 3.7px, hsl(3 95% 42%) 5.1px, transparent 6.8px), radial-gradient(circle at center, hsl(3 100% 62% / 0.3) 0, transparent 8.8px);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
background-size: 100% 320%, 17px 17px, 17px 17px;
background-repeat: no-repeat, repeat, repeat;
background-position: 0 0, 0 0, 0 0;
filter: drop-shadow(0 0 10.2px hsl(3 100% 60% / 0.55));
animation: text-effect-scan 5.2s linear infinite;
}
@keyframes text-effect-scan {
from { background-position: 0 0, 0 0, 0 0; }
to { background-position: 0 100%, 0 0, 0 0; }
}
Pure CSS — just add the .text-effect class to any element.
- Category
- Fill & Texture
- Type
- Animated
- Browser support
- background-clip:text + repeating radial-gradient LED grid
- Capabilities
- pure