HTML Marquee generator

How to use

1. Type the text you want to scroll.
2. Pick a direction — Up is the default — and set the seconds per loop.
3. Adjust the text color and size; the preview updates live.
4. Toggle "Reduced motion" to preview the static fallback.
5. Copy the HTML (paste anywhere) or the CSS class (add to your stylesheet).

Why the <marquee> tag is dead

<marquee> was a proprietary Internet Explorer extension from the 1990s that other browsers reverse-engineered. It never entered an HTML specification: HTML 4 called it obsolete before it even shipped, and the HTML Living Standard still lists it as a non-conforming legacy element. Browsers keep rendering it for backwards compatibility, but pages using it fail HTML validation, the animation cannot be styled precisely, and it may disappear in a future engine cleanup. The supported replacement is a CSS @keyframes animation on transform — smoother, GPU-accelerated, and fully styleable.

How to make text scroll up (the CSS way)

A vertical marquee has three parts: a clipping box, an animated track, and the text. The box has overflow: hidden and a fixed height. The track is a full-height flex container animated from translateY(100%) (one full box-height below, so the text starts off-screen at the bottom) to translateY(-100%) (fully above the top). Because the track is exactly as tall as the box, the percentage always equals the box height — the text makes one complete trip per loop:

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

.marquee-box {
  overflow: hidden;
  height: 140px;
}

.marquee-inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: marquee-up 3s linear infinite;
}

/* 可选：悬停暂停，满足 WCAG 2.2.2 的"可暂停"要求 */
.marquee-box:hover .marquee-inner {
  animation-play-state: paused;
}

<!-- 用法：<div class="marquee-box"><div class="marquee-inner"><span class="marquee-text">Tonight at 9</span></div></div> -->

For horizontal scrolling, swap the box height for a width and the track animation for translateX(100%) → translateX(-100%) (leftward) or the reverse (rightward). The generator switches these values for you when you change direction.

Accessibility: continuous motion is a real WCAG criterion

WCAG 2.2 Success Criterion 2.2.2 ("Pause, Stop, Hide") requires that any content that moves, blinks or auto-updates for longer than five seconds has a way to pause, stop or hide it. Continuous motion is genuinely harmful for users with vestibular disorders, and it drags attention away from reading for everyone else. Practical mitigations: keep marquee text short, use a slow loop (3 seconds or more per pass), add a hover-pause rule, and always ship a @media (prefers-reduced-motion: reduce) block that shows the text statically. That is the same pattern Apple, GitHub and most modern design systems use to honor the operating system's "Reduce motion" setting — and it is built into every snippet this tool generates.

Example: a vertical news ticker

<style>
  @keyframes marquee-up { from { transform: translateY(100%); } to { transform: translateY(-100%); } }
  .ticker { overflow: hidden; height: 48px; }
  .ticker div { height: 100%; display: flex; align-items: center;
                animation: marquee-up 4s linear infinite; }
  @media (prefers-reduced-motion: reduce) { .ticker div { animation: none; } }
</style>
<div class="ticker"><div><span>Breaking: CSS replaces &lt;marquee&gt;</span></div></div>

Common mistakes

• Using <marquee> in new code. It fails validation, cannot be paused or styled, and is one browser cleanup away from disappearing.
• Animating top or margin instead of transform. Transform animations run on the GPU; layout properties reflow the page on every frame and stutter on low-end devices.
• Marqueeing a long paragraph. If the text is taller than the box, the loop travel is wrong and part of it is never visible. Keep the content to a line or two.
• Forgetting white-space: nowrap on horizontal marquees — the text wraps instead of sliding.
• Skipping the prefers-reduced-motion fallback. It is a 3-line block that honors a real user need.

FAQ

Related tools

References

• MDN — <marquee> (obsolete)
• MDN — transform
• MDN — animation-play-state
• W3C — WCAG 2.2 Understanding 2.2.2 Pause, Stop, Hide

Last updated: 2026-09-01