News Ticker with Live Badge
A breaking news bar: a pulsing LIVE badge pinned on the left while headlines scroll past behind it. The headline track is the two-copy marquee, faded where it slides under the badge.
Also known as: breaking news ticker css, news ticker html css, live ticker bar.
Live
Markets close higherStorm warning liftedCity win 3-1 at homeNew bridge opens today
HTML
<div class="txt-news-ticker">
<span class="txt-news-ticker-badge">Live</span>
<div class="txt-news-ticker-window">
<div class="txt-news-ticker-track">
<span>Markets close higher</span><span>Storm warning lifted</span><span>City win 3-1 at home</span><span>New bridge opens today</span>
</div>
<div class="txt-news-ticker-track" aria-hidden="true">
<span>Markets close higher</span><span>Storm warning lifted</span><span>City win 3-1 at home</span><span>New bridge opens today</span>
</div>
</div>
</div>CSS
.txt-news-ticker {
--c: var(--txt-color, #3b82f6);
font-size: calc(var(--txt-size, 32px) * 0.72);
font-family: system-ui, sans-serif;
font-weight: 700;
line-height: 1.2;
display: flex;
align-items: stretch;
width: 19em;
overflow: hidden;
border-radius: 0.35em;
background: color-mix(in srgb, var(--c) 10%, transparent);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 25%, transparent);}
.txt-news-ticker-badge {
display: flex;
align-items: center;
gap: 0.4em;
padding: 0.45em 0.7em;
font-size: 0.8em;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #fff;
background: #dc2626;
}
.txt-news-ticker-badge::before {
content: "";
width: 0.5em;
height: 0.5em;
border-radius: 50%;
background: #fff;
animation: txt-news-ticker-ping 1.2s cubic-bezier(0, 0, 0.2, 1) infinite;
}
.txt-news-ticker-window {
display: flex;
flex: 1;
align-items: center;
overflow: hidden;
white-space: nowrap;
font-weight: 600;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 1.5em, #000 85%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 1.5em, #000 85%, transparent);
}
.txt-news-ticker-track {
display: flex;
flex-shrink: 0;
animation: txt-news-ticker-scroll 16s linear infinite;
}
.txt-news-ticker-track span::after {
content: "•";
margin: 0 0.7em;
color: var(--c);
}
@keyframes txt-news-ticker-scroll {
to { transform: translateX(-100%); }
}
@keyframes txt-news-ticker-ping {
0% { box-shadow: 0 0 0 0 rgb(255 255 255 / 0.7); }
100% { box-shadow: 0 0 0 0.45em rgb(255 255 255 / 0); }
}
@media (prefers-reduced-motion: reduce) {
.txt-news-ticker, .txt-news-ticker *, .txt-news-ticker::before, .txt-news-ticker::after, .txt-news-ticker *::before, .txt-news-ticker *::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.