HTML Marquee Generator

The marquee element, generated for you

The <marquee> tag makes text or images scroll across the page. It first appeared in Internet Explorer in the 1990s and became a symbol of early web design. It is still rendered by today's major browsers, which makes it a quick way to add a ticker or a nostalgic effect. This marquee generator writes the tag with all its attributes and shows a live preview.

Example

<marquee direction="left" behavior="scroll" scrollamount="6" bgcolor="#fef3c7"
  width="100%" onmouseover="this.stop()" onmouseout="this.start()"
  style="color:#b91c1c;font-size:18px">Big summer sale</marquee>

Marquee generator options and attributes

• direction – left (default), right, up or down. Vertical directions work best with a fixed height.
• behavior – scroll moves the content across and restarts; slide moves it in once and stops; alternate bounces it back and forth between the edges.
• scrollamount – the distance in pixels per step, which effectively sets the speed. 6 is the browser default; higher is faster.
• loop – how many times to scroll. -1 (or no value) means forever.
• bgcolor, width, height – background color and size of the scrolling area.
• Pause on hover – adds onmouseover="this.stop()" and onmouseout="this.start()" so visitors can read the text.

Should you still use marquee?

Honestly, only with care. The element is deprecated in the HTML standard: browsers keep it for compatibility, but it is not recommended for new sites. Moving text is also an accessibility concern. WCAG 2.2 success criterion 2.2.2 requires that content which moves for more than five seconds can be paused, stopped or hidden, and constant motion can be distracting or uncomfortable for some users. That is why pause-on-hover is enabled by default here, though it does not help keyboard or touch users.

Good uses include retro-themed pages, intranet notices and demos. For a production site, a CSS animation gives you the same effect with more control and the ability to respect the user's "reduce motion" setting:

.ticker { overflow: hidden; white-space: nowrap; }
.ticker span { display: inline-block; animation: slide 12s linear infinite; }
@keyframes slide { from { transform: translateX(100%); } to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) { .ticker span { animation: none; } }

Troubleshooting scrolling text

• The motion is jerky. A high Speed (scrollamount) moves the text in large jumps. Values between 3 and 6 give smoother, more readable movement.
• Vertical text does not appear to move. With up or down, set a Height; without one, the box is only as tall as the text and there is no room to scroll.
• Nothing moves in a newsletter. Many email clients strip or ignore the element, so treat marquee text in email as a static line.
• Bouncing text is clipped. With alternate, content wider than the box cannot bounce cleanly; shorten the text or widen the marquee.

Related tools

Try the generated code in the real-time HTML editor to combine it with the rest of your page, or build a clickable version with the HTML link generator and place the link inside the marquee. Everything is generated in your browser.