HTML marquee replacement

Modern marquee alternative: CSS scrolling text generator + code

The `<marquee>` element is obsolete, poorly accessible, and inconsistent across modern browsers.

Use CSS animations for lightweight inline scrolling, then switch to the generator when you need export-ready GIF/WebM or transparent overlays.

Deprecated `<marquee>` explainedPure CSS keyframes exampleGenerator export workflow

Build a modern marquee replacement directly on this page

Tune text, speed, direction, and style, then export or embed without leaving this guide.

Preview = ExportHorizontal / Vertical / TiltedTransparent or Solid BGGIF · WebM · Web Embed
Type your scrolling text here (multi-line, emojis allowed) 🎉 Switch horizontal/vertical/tilted modes, tweak speed, colors, and background. What you see in preview is exactly what you export.

Templates

Apply a style in one click, then continue editing manually.

Cloud configs (Pro)

Save and load full generator snapshots. Available for Pro users only.

Text & Style

Multi-line text, emojis; font, colors, background, spacing, align

2608 chars left

Enter = new line; vertical/credits mode respects lines.

Split by blank lines or add blocks; reorder freely

40px

Transparent shows a checkerboard in preview; export transparency depends on target format (e.g., WebM, some GIFs).

1.60

Avoid cramped lines in vertical/credits mode.

Alignment applies to vertical / tilted modes. Horizontal marquee is a single line.

Scroll & Duration

Direction, mode, speed, loop/once, tilt controls

Est. 5.0s
Moderate
Very slowModerateFastVery fast

GIF exports loop by default; video can loop N times or target duration.

Estimated duration: with current content, path, and speed, about 5.0s to scroll once.

Why was `<marquee>` deprecated?

`<marquee>` was never part of a robust modern web standard and provides poor control over accessibility, motion preferences, and responsive behavior. Modern CSS animations are easier to maintain and integrate with reduced-motion handling.

Modern CSS alternative

The standard approach is `@keyframes` + `animation` with an overflow-hidden container. You keep full control over timing, direction, typography, and can pause or disable motion based on user preferences.

Pure HTML/CSS scrolling text snippet

Copy this snippet as a drop-in replacement for legacy marquee behavior.

<div class="marquee-wrap">
  <p class="marquee-text">Your scrolling text goes here</p>
</div>

<style>
  .marquee-wrap {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    background: #111;
    color: #fff;
    padding: 8px 0;
  }

  .marquee-text {
    display: inline-block;
    padding-left: 100%;
    animation: marquee 12s linear infinite;
  }

  @keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-100%); }
  }
</style>

When to use the generator instead

Use the generator when you need pixel-perfect preview, transparent export for video overlays, multi-line credits, perspective motion, or reusable embed code for production workflows.

Marquee alternative FAQ

Quick answers for migration, accessibility, and export decisions.

Is `<marquee>` still supported?

Some browsers still render it, but it is obsolete and unreliable for long-term production code.

How can I pause scrolling on hover?

Set `animation-play-state: paused` on hover for the animated element.

How do I support reduced-motion users?

Wrap animation rules in `@media (prefers-reduced-motion: reduce)` and disable or slow movement.

When should I export GIF/WebM instead of inline CSS?

Choose export when you need fixed playback across editing tools, social uploads, or stream overlays.

Ready to replace your old marquee implementation?

Start with the generator for a production-ready result, then adapt settings for your platform.

Open generatorBrowse templates