CSS-Zone

Running line

Endless accent stripe — good for banners, status bars or promo blocks. Practical example for marquee lines and continuous content rails with live preview, HTML structure, and production-ready CSS you can integrate quickly.

← Back to Home

Preview

CSS Motion · Microcopy · Live preview · Copy-readyCSS Motion · Microcopy · Live preview · Copy-readyCSS Motion · Microcopy · Live preview · Copy-readyCSS Motion · Microcopy · Live preview · Copy-readyCSS Motion · Microcopy · Live preview · Copy-readyCSS Motion · Microcopy · Live preview · Copy-readyCSS Motion · Microcopy · Live preview · Copy-readyCSS Motion · Microcopy · Live preview · Copy-ready

HTML + CSS

<div class="marquee">
  <div class="marquee__track">
    <div class="marquee__lane">
      <span>CSS Motion · Microcopy · Live preview · Copy-ready</span>
      <span>CSS Motion · Microcopy · Live preview · Copy-ready</span>
      <span>CSS Motion · Microcopy · Live preview · Copy-ready</span>
      <span>CSS Motion · Microcopy · Live preview · Copy-ready</span>
      <span>CSS Motion · Microcopy · Live preview · Copy-ready</span>
      <span>CSS Motion · Microcopy · Live preview · Copy-ready</span>
      <span>CSS Motion · Microcopy · Live preview · Copy-ready</span>
      <span>CSS Motion · Microcopy · Live preview · Copy-ready</span>
    </div>
    <div class="marquee__lane" aria-hidden="true">
      <span>CSS Motion · Microcopy · Live preview · Copy-ready</span>
      <span>CSS Motion · Microcopy · Live preview · Copy-ready</span>
      <span>CSS Motion · Microcopy · Live preview · Copy-ready</span>
      <span>CSS Motion · Microcopy · Live preview · Copy-ready</span>
      <span>CSS Motion · Microcopy · Live preview · Copy-ready</span>
      <span>CSS Motion · Microcopy · Live preview · Copy-ready</span>
      <span>CSS Motion · Microcopy · Live preview · Copy-ready</span>
      <span>CSS Motion · Microcopy · Live preview · Copy-ready</span>
    </div>
  </div>
</div>

<style>
.marquee {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  background: linear-gradient(120deg, #0f172a, #0b253f);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.marquee::after,
.marquee::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.marquee::before {
  background: linear-gradient(90deg, #0f172a 0%, transparent 14%, transparent 86%, #0f172a 100%);
}

.marquee::after {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: inherit;
  inset: 6px;
}

.marquee__lane {
  display: flex;
  gap: 32px;
  padding: 16px 22px;
  font-size: 14px;
  color: #e2e8f0;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  width: max-content;
  flex-shrink: 0;
}

.marquee__lane span {
  white-space: nowrap;
  color: rgba(226, 232, 240, 0.86);
}

.marquee__track {
  display: flex;
  width: max-content;
  animation: scroll 28s linear infinite;
  will-change: transform;
}

@keyframes scroll {
  0% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-50%, 0, 0); }
}
</style>

What CSS ticker animation is and why teams use it

A ticker is an infinite marquee pattern that keeps content moving without disrupting the layout. It is useful when you need to display short updates, promo copy, or branded highlights while preserving a clean visual hierarchy.

Where ticker works best in production interfaces

Use ticker in hero sections, status bars, trust lines, announcement strips, and compact content rails. Keep speed moderate and text contrast high so the component remains readable and useful instead of becoming visual noise.

How to adapt this ticker snippet for your product

You can tune spacing, duration, typography, and gradient surface to match your design system. For accessibility, add hover pause behavior and reduced-motion fallbacks so users who prefer less movement still get the same information.

Related animation examples

Vertical scrollNews ticker