Marquee Generator

Create scrolling text with the marquee tag or a modern CSS animation.

Speed (scrollamount)

6

Delay (scrolldelay)

85ms

HTML
<marquee direction="left" scrollamount="6" scrolldelay="85" bgcolor="#fff3e0">Breaking news: FowTools adds a Marquee Generator!</marquee>
Modern alternative – HTML
<div class="marquee"><span>Breaking news: FowTools adds a Marquee Generator!</span></div>
Modern alternative – CSS
.marquee {
  overflow: hidden;
  white-space: nowrap;
  background: #fff3e0;
}

.marquee span {
  display: inline-block;
  animation: marquee 10s linear infinite;
}

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

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

Marquee Generator

The <marquee> tag makes text scroll horizontally or vertically across its container. It was a hallmark of late-1990s web pages and is still used today for news tickers, announcements, retro designs and quick demos. The Marquee Generator lets you configure the effect with simple controls and copy the code — and because the tag is obsolete, it also gives you a modern, standards-compliant CSS animation alternative.

Marquee attributes

  • direction – left (default), right, up or down.
  • behavior – scroll loops continuously, slide stops at the edge, alternate bounces back and forth.
  • scrollamount – step size in pixels; larger values scroll faster.
  • scrolldelay – pause between steps in milliseconds.
  • loop – how many times the text scrolls; -1 (omitted) means forever.
  • bgcolor, width and height – the box around the moving text.

The modern CSS version

The second and third code blocks recreate the effect with a wrapper div that hides overflow and an inner span animated with @keyframes and transform. This version validates, is GPU-accelerated, can be paused with animation-play-state, and includes a prefers-reduced-motion media query that stops the movement for users who asked their operating system for less animation.

When to use it

Use scrolling text sparingly: a single ticker for short announcements works, several moving lines quickly become hard to read. Never put critical content such as prices or legal notices in a marquee. To style the box around the ticker see the CSS Border Generator, and to pick a background use the CSS Background Color Generator.

Frequently Asked Questions

Every major browser still renders marquee for backwards compatibility, but the element is obsolete in the HTML standard and validators flag it. For new projects use the CSS animation version the generator also produces.

The scrollamount attribute sets how many pixels the text moves per step and scrolldelay sets the pause between steps in milliseconds. Higher scrollamount means faster text. In the CSS version the animation duration controls the speed.

scroll moves the text across and starts again, slide stops once the text reaches the far edge, and alternate bounces it back and forth between both edges.

Moving content can distract readers and trigger discomfort for people with vestibular disorders. Keep it short, avoid essential information in it, and respect prefers-reduced-motion, which the generated CSS already does.