CSS MARQUEE (SCROLLING TICKER) GENERATOR

Example output (default settings)

.marquee {
  display: flex;
  overflow: hidden;
  background: #201d19;
  color: #f2e9dc;
  font-size: 20px;
  -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;
  min-width: 100%;
  justify-content: space-around;
  gap: 48px;
  padding: 14px 24px;
  margin: 0;
  list-style: none;
  white-space: nowrap;
  animation: marquee-scroll 20s linear infinite;
}

.marquee:hover .marquee__track {
  animation-play-state: paused;
}

@keyframes marquee-scroll {
  from { transform: translateX(0); } to { transform: translateX(-100%); }
}

@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
}

<div class="marquee">
  <ul class="marquee__track">
      <li>Free shipping over $50</li>
      <li>New arrivals every Friday</li>
      <li>30-day returns</li>
  </ul>
  <ul class="marquee__track" aria-hidden="true">
      <li>Free shipping over $50</li>
      <li>New arrivals every Friday</li>
      <li>30-day returns</li>
  </ul>
</div>

How to build a CSS marquee

1. 1

   Enter the items to scroll, one per line.

2. 2

   Choose the direction and the time one full loop takes.

3. 3

   Set the gap between items, font size, and colors.

4. 4

   Turn pause-on-hover and faded edges on or off.

5. 5

   Copy the CSS and HTML into your page.

Questions

Why not just use the HTML <marquee> tag?

The <marquee> element is obsolete and not part of the HTML standard. A CSS animation does the same job, can be styled, pauses on hover, and can be switched off for visitors who prefer reduced motion.

How does the loop stay seamless?

The list is rendered twice side by side. Each copy slides by exactly its own width, and the instant the first copy has left, the second sits where it started, so the jump is invisible. The second copy is marked aria-hidden so screen readers don't read the items twice.

How do I change the speed?

The speed is the animation duration: the time one full loop takes. A longer duration scrolls slower. If you add more text, raise the duration to keep the same apparent speed, because the track gets longer.

Does it respect reduced-motion settings?

Yes. The generated CSS includes a prefers-reduced-motion media query that stops the animation, so those visitors see the items statically.

Is anything uploaded?

No. The preview and the code are generated locally in your browser.

Related tools

• Typewriter Effect GeneratorAnimate text typing itself out with a pure-CSS steps() animation and a blinking caret — no JavaScript needed.
• Shimmer / Metallic Text GeneratorSweep a bright highlight band across text for a metallic or shimmer effect, built with an animated gradient.
• Animated Gradient Text GeneratorFill text with a multi-color CSS gradient that drifts across the letters, with adjustable angle and speed.
• Neon Glow GeneratorBuild a glowing neon-sign effect for text or a box, with stacked shadow layers and an optional flicker animation.
• Glitch Text GeneratorAnimate an RGB-split, scan-line glitch effect on headline text, with adjustable offset, speed, and colors.
• 3D Extruded Text GeneratorGive flat text a solid, extruded look with a stack of offset text-shadow layers — adjust depth, angle, and color.
• Animated Gradient Background GeneratorBuild a slow-moving, multi-color gradient background for hero sections and banners.
• Text Stroke / Outline GeneratorBuild hollow or filled outlined headlines with -webkit-text-stroke and a cross-browser shadow fallback.