🍱 Lunchbox Hands

CSS Marquee Generator

Scrolling text tickers in pure CSS — the modern <marquee>

A modern replacement for the <marquee> tag — seamless scrolling text in pure CSS, with vertical tickers, bounce, pause-on-hover, and edge fading. Copy the CSS and HTML. Everything runs in your browser.

Breaking news — pure CSS marquee, no JavaScript required
Scroll Left
Breaking news — pure CSS marquee, no JavaScript required
Scroll Right
Breaking news — pure CSS marquee, no JavaScript required
Vertical Ticker
Breaking news — pure CSS marquee, no JavaScript required
Bounce
Breaking news — pure CSS marquee, no JavaScript required
Pause on Hover
Breaking news — pure CSS marquee, no JavaScript required
Edge Fade
Breaking news — pure CSS marquee, no JavaScript required
s
px
.lb-marquee-scroll-left {
  overflow: hidden;
  white-space: nowrap;
  max-width: 100%;
}
.lb-marquee-scroll-left .lb-marquee-track {
  display: inline-flex;
  animation: lb-marquee-left 12s linear infinite;
}
.lb-marquee-scroll-left .lb-marquee-track > span { padding-right: 48px; }
@keyframes lb-marquee-left {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .lb-marquee-scroll-left .lb-marquee-track {
    animation: none;
    transition: none;
  }
}

Get weekly dev tools and tips