Use the free Marquee Text Preview below: your data never leaves your browser — all work happens on your device, and nothing is uploaded to any server.
The Return of Scrolling Text
Scrolling text, once known as the marquee, was a staple of early web pages: a line of text sliding across the screen, usually announcing something. It fell out of fashion because it was overused, fast, and hard to read. It has come back in a calmer form, as a CSS animation, for announcements, tickers, and banners. The old HTML marquee tag is deprecated and should not be used. The modern version uses a CSS animation that moves text sideways, and it is fully under your control. The tool above builds that modern version: type your text, set speed, direction, gap, and size, and copy the code.
The appeal is simple. A scrolling banner catches the eye without taking much space, and it can carry a message that changes often, like a sale, a warning, or a live update. The danger is equally simple. Scrolling text is hard to read, because the words move while the reader tries to follow them, and it is hard to ignore, because motion draws the eye even when the user is trying to read something else. Used once, slowly, for one short message, it works. Used everywhere, fast, for long messages, it ruins the page.
How to Use the Preview
Type your message first, and keep it short. One clause works: a sale announcement, a shipping note, or an event date. A full paragraph does not, because nobody will wait through a long scroll to read it, and the text will loop before they finish. The preview repeats your text four times with a gap between copies, so the scroll loops seamlessly: when the first copy leaves the screen, the next one is already entering.
Then set the speed. The slider sets how many seconds one full scroll takes, from 3 to 30 seconds. Ten seconds is a good starting point for a short banner. Faster than 5 seconds is hard to read for most people. Slower than 20 seconds can feel frozen, because the text barely seems to move. Direction is a choice of reading habit: leftward scrolling is the standard, because it matches how ticker text has always moved. Rightward scrolling suits right-to-left languages or a deliberate visual contrast, but it surprises readers who expect the standard direction.
Gap, Size, and Readability
Gap is the space between repeats of your text, and it matters more than it looks. Too small a gap, and the repeats blur into one endless sentence. Too large a gap, and the banner spends half its time empty. Around 40 pixels suits most banners, with larger gaps for larger text. Font size should match the banner’s importance: 20 to 24 pixels for a site-wide announcement, smaller for a subtle ticker inside a section. The preview shows size and gap together, so you can judge them as a pair, not separately.
Contrast matters as much as size. Scrolling text is already hard to read, so do not make it harder with pale text on a pale background. Use dark text on a light banner, or white text on a dark banner, and keep the font bold or medium weight. Avoid thin fonts for scrolling text, because thin strokes break up as they move. If the message matters, readability beats style every time: a plain, bold, high-contrast marquee is better than a beautiful one nobody can read.
When Scrolling Text Helps, and When It Hurts
Scrolling text helps for one short, time-sensitive announcement that every visitor should see: a sale ending today, a service outage, a new feature launch. It helps for tickers where the content itself is a stream, like stock prices or sports scores, because the user expects motion there. It helps as decoration in a hero section, where a slow, large, scrolling word adds movement without carrying critical information.
Accessibility and Motion
Scrolling text is a known accessibility problem. It is hard for people with reading difficulties, attention difficulties, and motion sensitivity, because the text never sits still. The standard advice is to pause the animation on hover, so a user who wants to read the message can stop it by resting the mouse on it, and to respect reduced-motion settings by showing the text statically for users who ask for less motion. The copied code is a starting point: add a hover rule that pauses the animation, and a reduced-motion media query that stops it entirely.
Frequently Asked Questions
Is the old marquee tag still okay to use? No. It is deprecated, behaves inconsistently across browsers, and gives you no control. Use the CSS animation in the code box instead.
Why does my marquee jump when it loops? The loop jumps when the repeated text does not line up exactly. This tool repeats the text with a fixed gap and moves it by exactly half its width, which is the standard seamless pattern. Keep the structure the same when you adapt the code.
How slow should scrolling text be? Slow enough to read comfortably: around 10 seconds per pass for a short banner, slower for longer text. If you cannot read it aloud at a normal pace while it scrolls, it is too fast.
Write one short message above, set a calm speed, and copy the code. A single slow marquee, used sparingly, still earns its place on a page.
Related tools
- Vista Previa de Texto Deslizante (Spanish version)
- Dot Grid Pattern Maker
- Halftone Dot Pattern Maker