marquee

Seamless marquee

A CSS-only endless ticker with faded edges that pauses on hover and becomes a static row for reduced motion.

All modern browsers (CSS animation + mask-image).

Use it for

Real, specific content: product names, press quotes, customer names you can back up, a menu
A single band that adds rhythm between two calm sections

Don't — this is how it turns into slop

An anonymous 'Trusted by' logo cloud — moving it doesn't make it credible
More than one marquee on a page, or anything people must read to act

Accessibility

Pauses on hover and keyboard focus; the duplicate track is aria-hidden
prefers-reduced-motion turns it into a static scrollable row

Performance

Pure CSS transform animation — no JS, no layout work per frame

The code

/* Endless marquee, CSS only. Content is duplicated once (the copy is
   aria-hidden) and the track slides by exactly one copy, so the loop is
   seamless. Edges fade out instead of hard-cutting. */
.marquee {
  --marquee-speed: 40s;
  --marquee-gap: 3rem;
  display: flex;
  overflow: hidden;
  gap: var(--marquee-gap);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.marquee__track {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: var(--marquee-gap);
  min-width: 100%;
  animation: marquee-scroll var(--marquee-speed) linear infinite;
}

.marquee--reverse .marquee__track {
  animation-direction: reverse;
}

/* Let people read or click what they're pointing at. */
.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track {
  animation-play-state: paused;
}

@keyframes marquee-scroll {
  to {
    transform: translateX(calc(-100% - var(--marquee-gap)));
  }
}

/* Reduced motion: a static, scrollable row instead of a moving one. */
@media (prefers-reduced-motion: reduce) {
  .marquee {
    overflow-x: auto;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .marquee__track {
    animation: none;
  }
  .marquee__track[aria-hidden="true"] {
    display: none;
  }
}

Which of these fit your site?

Scan your URL for free. The full review picks recipes for each section and hands your AI a complete design kit.

Check my site ↑