Softonic

Scrolling Text Generator

Step 1 / 2
Next

Scrolling headlines are how announcement bars, stock tickers and event banners hand a lot of information to a narrow strip of screen. This generator recreates the classic HTML <marquee> effect with a pure CSS @keyframes and transform: translateX() animation, so the technique keeps working in every modern browser without the deprecated tag. Pick a message, tune the speed in seconds per loop, set colors and font size, and preview the ticker live before you rebuild it with the CSS shown below.

How to build a scrolling banner

  1. 1

    Type the message

    Enter the headline. Short lines (4-10 words) read best on a moving strip.

  2. 2

    Pick the speed

    Lower seconds = faster scroll. 30-60 s per full loop works for news-style tickers.

  3. 3

    Set colors and size

    Choose a foreground for the text, a background for the strip, and a font size that matches your header height.

  4. 4

    Preview live

    The demo animates in real time so you can judge legibility before you ship.

  5. 5

    Rebuild it in CSS

    Copy the `@keyframes` and `transform: translateX()` pattern shown below into your own stylesheet to reproduce the ticker on your site.

Why CSS animation instead of <marquee>

The <marquee> tag was deprecated in HTML5 and is flagged by WHATWG as obsolete. Browsers still render it for now, but accessibility tools and validators complain, and you lose fine control over easing and looping. A transform: translateX() animation inside overflow: hidden gives identical visual behaviour with modern tooling.

Tuning the speed

Time-to-traverse depends on both the duration and the total width. A rough rule for a 1200 px viewport:

Duration Feel Typical use
10-20 s Fast, attention Flash sales, urgent alerts
30-45 s News ticker Live scores, headline bars
60-90 s Ambient Venue signage, conference rooms
120 s + Barely moving Decorative, luxury brand banners

Accessibility checklist

  • Wrap the strip in role="marquee" or aria-live="off" so screen readers do not re-announce the message every loop.
  • Respect reduced motion with @media (prefers-reduced-motion: reduce) { animation: none; } and show the text statically.
  • Keep contrast ratio at least 4.5:1 between text and background; moving text is harder to read than static.
  • Never put critical information (legal notices, prices, error messages) only inside a scrolling strip.

Frequently Asked Questions

No. The preview is a <div> with overflow: hidden and a CSS @keyframes animation that moves the inner span with translateX. It validates as modern HTML5.

Add animation-play-state: paused on the hover selector of the container. Some users find this friendlier than a constant loop.

Yes. Change the @keyframes end value from translateX(-100%) to translateX(100%) and start from -100% to reverse direction. Useful for RTL languages.

No. CSS transforms run on the GPU and the text is plain HTML inside the DOM, so crawlers read it normally and the animation does not block the main thread.

Everything stays in your browser while you preview. Nothing is uploaded or logged.

Related Tools

Word Counter

Count words, characters, sentences and paragraphs with reading time, speaking time, keyword density and a Flesch readability score for essays, posts, captions and meta descriptions.

Password Generator

Generate strong random passwords with adjustable length, symbols, numbers and mixed case using cryptographic randomness.

Emoji Kitchen

Try verified Google Emoji Kitchen sticker pairs, download PNGs, and get supported suggestions when a pair is not in the curated set.

Meme Text Generator

Add classic meme captions to a template or your own image. Set top and bottom text, tune font, color and stroke, then download or copy a PNG.

Character Counter

Count characters, words, lines, sentences and paragraphs in any text. See totals with and without spaces plus a character breakdown.

Wingdings Translator

Turn Latin letters and digits into Wingdings-style Unicode symbols for puzzles, jokes and retro Windows notes.

Tool available in other languages