LED Scrolling Sign Text
A dot-matrix LED sign: text scrolls behind a fixed grid of round pixels, so it lights them up as it passes, over a field of dim unlit dots. The grid is a radial-gradient mask; no images.
Also known as: led sign css, dot matrix text animation, led marquee.
Welcome in ✦ Open till 10 pm ✦
HTML
<div class="txt-led-scrolling-sign">
<div class="txt-led-scrolling-sign-glow">
<div class="txt-led-scrolling-sign-screen">
<div class="txt-led-scrolling-sign-group">Welcome in ✦ Open till 10 pm ✦ </div>
<div class="txt-led-scrolling-sign-group" aria-hidden="true">Welcome in ✦ Open till 10 pm ✦ </div>
</div>
</div>
</div>CSS
.txt-led-scrolling-sign {
--c: var(--txt-color, #3b82f6);
font-size: var(--txt-size, 32px);
font-family: system-ui, sans-serif;
font-weight: 700;
line-height: 1.2;
padding: 0.3em;
border-radius: 0.3em;
background: color-mix(in srgb, var(--c) 6%, #0a0b0d);
box-shadow: inset 0 0 0 0.06em rgb(255 255 255 / 0.06), 0 0.2em 0.5em -0.2em rgb(0 0 0 / 0.5);}
.txt-led-scrolling-sign-glow {
filter: drop-shadow(0 0 0.15em var(--c));
}
.txt-led-scrolling-sign-screen {
display: flex;
align-items: center;
width: 11em;
height: 1.12em;
overflow: hidden;
white-space: nowrap;
font-size: 1.3em;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-weight: 800;
text-transform: uppercase;
color: color-mix(in srgb, var(--c) 75%, #fff);
/* unlit LEDs, then a mask that turns everything into round pixels */
background: color-mix(in srgb, var(--c) 18%, transparent);
-webkit-mask: radial-gradient(circle closest-side, #000 72%, transparent 88%) 0 0 / 0.125em 0.125em;
mask: radial-gradient(circle closest-side, #000 72%, transparent 88%) 0 0 / 0.125em 0.125em;
}
.txt-led-scrolling-sign-group {
flex-shrink: 0;
animation: txt-led-scrolling-sign-scroll 11s linear infinite;
}
@keyframes txt-led-scrolling-sign-scroll {
to { transform: translateX(-100%); }
}
@media (prefers-reduced-motion: reduce) {
.txt-led-scrolling-sign, .txt-led-scrolling-sign *, .txt-led-scrolling-sign::before, .txt-led-scrolling-sign::after, .txt-led-scrolling-sign *::before, .txt-led-scrolling-sign *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}Customizing this snippet
- Color: set
--txt-coloron the element or a parent. Currently previewing#3b82f6. - Font size: set
--txt-size. Every other dimension is inem, so the whole thing scales together. Currently previewing40px. - Speed: change the duration on the
transitionoranimationshorthand. Staggered delays are relative, so they keep their rhythm. - Reduced motion: the rule at the end of the CSS turns the motion off for people who asked their OS for less of it. Keep it.