WebToolsPlanet
Developer Tools

Marquee Generator

Build a scrolling marquee in modern CSS or the legacy <marquee> element. Pick a direction, speed, and colours and copy the markup with a live preview.

Last updated: May 25, 2026

Client-Side Processing
Input Data Stays on Device
Instant Local Execution

Find this tool useful? Support the project to keep it free!

Buy me a coffee

What is Marquee Generator?

A marquee is a horizontally (or vertically) scrolling band of text — the classic “stock ticker” effect that was originally provided by the non-standard HTML `<marquee>` element. The element was removed from the HTML living standard and is officially deprecated, but most browsers still render it for backwards compatibility, and it remains useful for email templates, kiosk displays, and intentionally retro projects.

For modern websites the recommended approach is a small CSS animation: a wrapper with `overflow: hidden` and a child track that uses a `@keyframes` rule to slide via `transform: translateX()` (or `translateY()`). This generator builds either flavour from a single form: pick text, direction, speed, colours, and loop count, then choose “CSS Marquee” for a self-contained `<style>` block + markup, or “<marquee>” for the legacy element with its original attributes.

A live preview shows the result as you edit. The CSS output also supports pause-on-hover so users can stop the animation to read the content — important for accessibility, since prefers-reduced-motion users and screen-reader users both struggle with constantly moving text.

How to Use Marquee Generator

1

Choose CSS Marquee (recommended) or the legacy <marquee> element.

2

Enter the scrolling text.

3

Pick a direction (left, right, up, or down) and behaviour.

4

Set the speed — duration for CSS, scrollamount/scrolldelay for legacy markup.

5

Adjust the background and foreground colours, width, and height.

6

(CSS) Enable pause-on-hover for better accessibility.

7

Copy the generated markup and paste it into your page or email template.

Common Use Cases

  • Adding a "free shipping" announcement bar to the top of an e-commerce page.
  • Building a retro stock-ticker effect for a financial dashboard.
  • Designing a kiosk or signage display with a scrolling status line.
  • Embedding a scrolling tagline inside an HTML email template (legacy <marquee>).
  • Generating a quick CSS @keyframes scrolling animation for a marketing site.
  • Prototyping a notification banner with pause-on-hover behaviour.

Example Input and Output

A right-to-left CSS marquee that loops infinitely and pauses when the user hovers.

Options
Output: CSS Marquee
Text: Limited-time offer — free shipping on orders over $50!
Direction: left
Duration: 18s
Loop: infinite
Pause on hover: yes
Background: #0f172a
Foreground: #f8fafc
Generated HTML + CSS
<style>
.marquee { width: 100%; height: 40px; overflow: hidden; background: #0f172a; color: #f8fafc; display: flex; align-items: center; white-space: nowrap; }
.marquee__track { display: inline-block; padding-left: 100%; animation: wtp-marquee-left 18s linear infinite; }
@keyframes wtp-marquee-left {
  from { transform: translateX(100%); }
  to   { transform: translateX(-100%); }
}
.marquee:hover .marquee__track { animation-play-state: paused; }
</style>

<div class="marquee">
  <span class="marquee__track">Limited-time offer — free shipping on orders over $50!</span>
</div>

Accessibility

Constantly moving text is difficult for users with vestibular or attention disorders, and screen readers cannot pause it. Enable pause-on-hover, keep durations long enough to read, and respect prefers-reduced-motion (wrap the @keyframes in @media (prefers-reduced-motion: no-preference)).

<marquee> is deprecated

The <marquee> element was removed from the HTML specification. Browsers still render it for backwards compatibility, but it can be dropped at any time and offers no a11y or performance affordances.

Privacy

All generation and preview happens locally in your browser. Nothing is uploaded.

Frequently Asked Questions

Should I use <marquee> on a new project?
No. The element is non-standard and was removed from the HTML living standard. Use the CSS output for any new project. <marquee> is only useful for legacy environments — older HTML email clients, retro projects, kiosks running outdated browsers.
What does pause-on-hover do?
It adds a `:hover` rule that sets `animation-play-state: paused`, so hovering the marquee stops the scrolling. This makes the text readable and is recommended for accessibility.
How do I make it slower or faster?
For CSS output, increase or decrease the duration (in seconds). For legacy <marquee>, lower scrolldelay or raise scrollamount to speed up; raise scrolldelay or lower scrollamount to slow down.
Why does my CSS marquee not loop continuously?
Set the loop count to -1 (infinite). Any positive number stops the animation after that many runs.
Can I use this in HTML email?
Yes for the legacy <marquee> output — most email clients (Outlook, Gmail web, Apple Mail) still render it. CSS animations have spottier email-client support; test before relying on them.
Does this tool send my text anywhere?
No. Generation and preview happen entirely in your browser.

Related Tools

Glitch Text Generator
Add Unicode combining characters to text to create glitchy Zalgo effects — adjustable intensity for cyberpunk, horror, or creative aesthetics.
ASCII Art Generator
Convert text to ASCII art using FIGlet-style fonts — create banners for code comments, README files, terminal scripts, and creative displays.
CSS Keyframe Animator
Build CSS @keyframe animations visually — configure transforms, opacity, and timing with a live preview.
CSS Loader Generator
Create pure-CSS loading spinners, dots, and bar animations — no JavaScript or images needed. Customizable colors, sizes, and speeds.
CSS Background Pattern Generator
Create pure CSS background patterns — stripes, dots, grids, chevrons — with no images and instant CSS output.
Text to Handwriting
Convert text to handwriting-style fonts.