Fundamentals

Buttons Text & Typography Forms Navigation & UI Loading

Design & Visuals

Backgrounds Glass & Morphism Visual Effects Liquid & Morphing SVG & Art

Animations & Scroll

Scroll & Parallax Transitions Hover & Interactions 3D & Depth Cursors

Gallery & More

Cards & Layouts Gallery & Media Data & Visualization Atmosphere Utilities
All Effects New Favorites Templates Blog Tips ✨ Go Premium
Distortion✨ Premium

LED Matrix Display

Red-orange Courier text wrapped in a four-layer glow that breathes every 1.5 s, on a black panel sprinkled with a fine dot grid: the look of an illuminated display.

CSSText-shadowLED

Updated

LED Matrix Display — preview ▶ Free account: live preview + 1 free effect

This effect is part of Effect.Labs — 840 vanilla effects, some free, some premium. Distortion has 31 effects, including 5 free. Explore the category →

View in catalogue

3 usage examples

Coach station — the board of the next five departures — LED Matrix Display example 1

① Coach station — the board of the next five departures

WhenOn the Quillebourg coach station page, the "Next departures" block shows five lines (time, destination, bay) breathing together, next to the bay map; the last update time sits above.
WhyThe illuminated board is the visual language of stations: travellers recognise the information before reading it. One panel with five lines keeps the columns aligned thanks to the fixed-width font.
SettingsOne root, five .ledm-text. --ledm-size: 16px, --ledm-spacing: 1.5px, --ledm-width: 100%, --ledm-glow-far: transparent (lines no longer blend), background and height released; white-space: pre on the lines to keep the alignment spaces.
Browser basketball game — the score turning to 03 after a basket — LED Matrix Display example 2

② Browser basketball game — the score turning to 03 after a basket

WhenAt the top of the Dunkarel screen, the "Baskets" counter shows 02. When "Shoot" is clicked, the ball drops into the hoop and the counter turns to 03; the scene replays the shot in a loop.
WhyA glowing score evokes a sports hall board without drawing any more scenery. The breathing glow keeps the counter alive between shots, and the new figure reads at a glance.
Settings--ledm-size: 26px, --ledm-spacing: 4px, --ledm-width: auto, background and height released; in the scene, the panel drops its 100 px minimum height (min-height: 0; padding: 6px 10px). The scene changes the figure; the effect counts nothing.
Late-night bar — the "OPEN" sign in the middle of the home page — LED Matrix Display example 3

③ Late-night bar — the "OPEN" sign in the middle of the home page

WhenOn Nocturlin's site, a dark brick wall with a large "OPEN" sign in the centre, followed by tonight's hours, a one-line menu and the "Book a table" button.
WhyA lit sign says "we're waiting for you" better than a sentence. At 58 px, the four-layer glow reads as real light on the wall, and the slow pulse avoids the buzzing-neon look.
Settings--ledm-size: 58px, --ledm-spacing: 12px, --ledm-width: auto, background and height released; panel with no minimum height, 14 × 26 px padding and a drop shadow added by the scene.

How it works

The .ledm-panel (280 px wide, #0a0a0a background, #1a1a1a border, 12 px corners) holds two elements: a .ledm-dots grid of white dots at 3% opacity every 6 px, and the .ledm-text. The text is not drawn with dots: it is bold Courier, spaced by 6 px, and its glow comes from shadows.

The glow stacks four text-shadow layers: two in the text colour (7 and 20 px blur), a middle #c20 layer at 40 px and a far #910 one at 80 px. The ledmPulse animation widens them over 0.75 s (10, 30, 60 and 100 px, the first turning #f40) then tightens them again: the display seems to breathe.

Several .ledm-text in one panel stack as lines (the panel is a column), giving a timetable or a multi-line score with a single root. Every glow colour is a variable; they can also be changed on a single line, since a variable set on an element applies to that element only.

The root centres the panel in at least 300 px of height on a #0a0a0f background; --ledm-height: auto, --ledm-bg: transparent and --ledm-width (100% or auto) adapt it to your layout. No JavaScript.

Accessibility

  • Screen readers: the text is real text, read as is; the dot grid carries aria-hidden="true". For a changing score, add aria-live="polite" to the line, as in the game example.
  • Reduced motion: under prefers-reduced-motion: reduce, the pulse stops and the glow stays at its resting size. Before the repair, the animation kept running.
  • Flashing: the pulse only changes the width of the glow, very slowly (1.5 s); frame by frame, no cell goes above the threshold.
  • Contrast: #f30 on #0a0a0a gives a ratio of about 5.4:1, enough for 28 px text. The glow thickens the strokes: keep at least 14 to 16 px and some letter spacing on small text.
  • Text size: at 16 px, the far glow (80 px) spills from one line to the next; set --ledm-glow-far to transparent for a multi-line board, as in the coach station example.

Browser compatibility

Pure CSS (2.4 KB), no dependency: four animated text-shadow layers, a repeating radial gradient for the dots, CSS variables, inset. Measured in Chromium 151, Firefox 153 and WebKit 26.5: pixel-identical to the previous version at 0, 40, 75 and 500 ms, two copies, no overflow at 390 px, 0 errors.

Chrome 87+✓ Full (measured)
Firefox 66+✓ Full (measured)
Safari 14.1+✓ Full (WebKit engine measured)
Edge 87+✓ Full (Chromium engine)
Mobile iOS 14.5+✓ Full (WebKit engine measured)
Android Chrome 87+✓ Full (Chromium engine)

Without inset (Chrome 49 to 86, Safari 9.1 to 14), the dot grid has no size and disappears; the text and its glow show normally. Without CSS variables, the text stays visible in the page's colours, with no glow.

The code

HTML structure to paste into your page (the CSS + JS come with your purchase):

index.html — structure 
<div class="fx-0275-root">
  <div class="ledm-panel">
    <div class="ledm-dots" aria-hidden="true"></div>
    <div class="ledm-text">12:45</div>
  </div>
</div>

One-time payment, no subscription — the code is yours forever

Customize

Options passed to the API or data-* attributes:

Option / propertyDefaultEffect
Text (HTML — .ledm-text, one per line) 12:45 Time, score, word or board: each .ledm-text added to the panel makes one more line.
--ledm-color · --ledm-peak #f30 · #f40 Text and close glow colour, and close glow at the peak of the pulse. Green: #3f6 · #4f7.
--ledm-glow · --ledm-glow-far #c20 · #910 Middle and far glow; green: #1c4 · #083. transparent on the far one for tight text.
--ledm-size · --ledm-spacing 28px · 6px Letter size and spacing. Keep the spacing at about 1/5 of the size.
--ledm-width 280px Panel width; auto to fit the text, 100% for all the room.
--ledm-panel #0a0a0a Panel background, behind the dot grid.
--ledm-speed 1.5s Length of one breath of the glow; 3s for a calmer sign.
--ledm-bg · --ledm-height #0a0a0f · 300px Root background and minimum height; transparent and auto to blend it in.

FAQ

No. The dots are a grid laid over the panel; the text is Courier with a glow. For truly dotted characters, you would need a "dot matrix" font hosted yourself, set in the font-family of .ledm-text.
Courier characters all have the same width: pad each line with spaces so the columns fall in the same place, and add white-space: pre to .ledm-text so the browser does not merge those spaces.
Yes: update the line's textContent from your script; the glow and the pulse apply to the new text straight away. Add aria-live="polite" if the value should be announced, and avoid updating it more than once per second.