Free Marquee Text Generator

Build a classic marquee-style text effect without using the obsolete HTML marquee tag. The editor gives you a live preview and produces a small HTML/CSS snippet that can be pasted into a landing page, CMS block, announcement bar, or custom site.

Live preview

<!doctype html>
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Generated website component</title><style>body{margin:0;padding:20px;font:16px/1.6 system-ui;color:#172033}*{box-sizing:border-box}button,input,textarea,select{font:inherit}button,a{touch-action:manipulation}button{cursor:pointer}a:focus-visible,button:focus-visible{outline:3px solid #2563eb;outline-offset:3px}.stg-container{position:relative;overflow:hidden;background:#ffffff;padding:10px;border:0px none #000000;border-radius:0px;text-align:left;margin:auto}.stg-viewport{position:relative;overflow:hidden;min-height:80px;height:100px;}.stg-message{position:relative;width:max-content;white-space:nowrap}.stg-viewport:focus-within .stg-message{animation-play-state:paused}.stg-pause{margin:8px;padding:8px 16px}.stg-paused *{animation-play-state:paused!important}.stg-block-0{container-type:normal;font-family:system-ui;font-size:16px;font-weight:400;letter-spacing:0px;color:#000000;background:#ffffff;line-height:1.6;animation:stg-block-0-motion 10s linear infinite both;}.stg-viewport:hover .stg-block-0,.stg-viewport:hover .stg-block-0 *{animation-play-state:paused}@keyframes stg-block-0-motion{from{transform:translateX(100cqw)}to{transform:translateX(-100%)}}.stg-container{container-type:inline-size}@media(prefers-reduced-motion:reduce){.stg-animated,.stg-animated *{animation:none!important;transform:none!important;opacity:1!important;clip-path:none!important;position:static!important;white-space:normal!important}.stg-message,.stg-track{width:auto!important;max-width:100%!important;overflow-wrap:anywhere!important}.stg-viewport{height:auto!important;overflow:visible!important}.stg-track{flex-wrap:wrap!important}.stg-duplicate{display:none!important}}
@media(prefers-reduced-motion:reduce){.stg-animated,.stg-animated *{animation:none!important;transform:none!important;opacity:1!important;clip-path:none!important;position:static!important;white-space:normal!important}.stg-message,.stg-track{width:auto!important;max-width:100%!important;overflow-wrap:anywhere!important}.stg-viewport{height:auto!important;overflow:visible!important}.stg-track{flex-wrap:wrap!important}.stg-duplicate{display:none!important}}</style></head><body><div class="stg-container"><div class="stg-viewport"><div class="stg-message stg-animated stg-block-0">Welcome to Scrolling Text Generator!</div></div></div><button class="stg-pause" aria-pressed="false">Pause animation</button><script>document.querySelector('.stg-pause').addEventListener('click',function(){const paused=document.querySelector('.stg-container').classList.toggle('stg-paused');this.textContent=paused?'Resume animation':'Pause animation';this.setAttribute('aria-pressed',String(paused));});</script></body></html>

What this generator does

Create left-to-right or right-to-left marquee motion.
Choose scroll, bounce, slide, fade, or other visual presets.
Control duration, font size, font family, text color, background, padding, border, and radius.
Pause motion on hover and include reduced-motion CSS automatically.
Copy full code or split HTML and CSS outputs.

How to use

Enter a short announcement or headline.
Choose Scroll for a traditional marquee or Bounce/Slide for a more pronounced effect.
Set direction and duration.
Adjust typography and container styling.
Preview the effect at mobile and desktop widths.
Copy the generated code into your page.

Best practices

Prefer CSS animation to the deprecated marquee element.
Avoid very short durations for long text.
Do not use moving text for essential instructions unless the same information is available statically.
Enable pause-on-hover for longer messages.

Frequently asked questions

Is HTML marquee still recommended?

No. The marquee element is obsolete; this tool generates a similar visual effect with CSS animation.

Can I make marquee text go right?

Yes. Change Direction to right and the preview and output update immediately.

Can I use the code in WordPress?

Yes, provided the editor or block you use allows custom HTML and CSS.

Does the generated marquee work on mobile?

The output is responsive and uses transforms rather than a fixed-width animation. Test your own text at narrow widths before publishing.

Related tools & guides

Scrolling Text Generator

Create beautiful scrolling text animations with live preview. Choose from 8 animation types, customize speed, direction, fonts and colors, then copy clean HTML & CSS.

How to Make a CSS Marquee Without the Deprecated Marquee Tag

Create a marquee-style scrolling effect with modern CSS animation, including seamless loops, pause behavior and reduced-motion fallback.

Scrolling News Ticker Generator

Build a scrolling news ticker or announcement bar with multiple items, separators, links, speed controls and accessible pause behavior.

GIF Scrolling Text Generator

Create an animated GIF with scrolling text. Set text, size, colors, direction, speed and canvas dimensions, preview it, then download the GIF.