CodesBeautify

Marquee Generator

Make scrolling text with a CSS animation, or the old marquee tag when you have no choice.

Marquee HTML and CSSCSS scroll left, 12s
<div class="marquee"><span>Free delivery on every order placed before Friday</span></div>

<style>
.marquee { overflow: hidden; white-space: nowrap; }
.marquee > span { display: inline-block; padding-left: 100%; animation: marquee-scroll 12s linear infinite; }
.marquee:hover > span { animation-play-state: paused; }
@keyframes marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) {
  .marquee > span { animation: none; padding-left: 0; }
}
</style>
Runs locally in your browser

About the Marquee Generator

The marquee tag was dropped from the HTML standard years ago and still works in most browsers, which is exactly why it lingers in intranet pages and email templates. This tool writes the modern equivalent by default: a container with overflow: hidden, an inner span, and a keyframe animation that translates the span across in whichever of the four directions you choose.

The CSS version wins on control. Duration is expressed in seconds rather than the obscure scrollamount number, hovering pauses the movement through animation-play-state, and a prefers-reduced-motion block stops the animation entirely for visitors whose system asks for less movement. That last piece is what hand rolled tickers almost always miss, and constant motion genuinely makes some people feel unwell rather than merely being a design preference.

The legacy option is still available for a template that cannot take a stylesheet, and the output carries a comment noting the element is obsolete so nobody inherits it by accident. Whichever you pick, remember that moving text is hard to read: keep the message short, keep the speed slow, and never put anything essential in the only copy of it. To fold the generated rules into your existing stylesheet, run them through the CSS Beautifier.

How to use

  1. Type the message that should scroll.
  2. Choose the CSS animation unless a legacy template forces the old tag.
  3. Set the direction and how many seconds one pass should take.
  4. Copy the markup and the stylesheet into your page.

Common questions

Is the marquee tag still supported?
Most browsers still render it, but it was removed from the standard and can stop working at any time, so prefer the CSS version.
How do I pause scrolling on hover?
Set animation-play-state to paused on the hover state, which the generated stylesheet does for you.
Why include a reduced motion rule?
Some people set their system to limit animation because movement causes nausea or distraction. The rule stops the scroll for them.
How do I make it scroll more slowly?
Increase the seconds per pass. A longer duration covers the same distance over more time, so the text moves more gently.