Generator Tools

CSS Marquee Generator

Generate a seamless CSS marquee that scrolls text in any direction. Live preview, speed, gap, pause on hover, fade edges, plus copy-paste CSS, HTML, Tailwind.

Quick presets

Live preview

The marquee below uses the exact CSS the tool will copy. The content is duplicated once so the loop stays seamless with no gap or jump. Hover to pause.

Breaking newsMarket updateWeather alertSports scoresTraffic report

The output includes a prefers-reduced-motion rule that stops the scroll for visitors who ask their system to reduce motion.

Direction

Content scrolls right to left. The classic news-ticker direction.

Pause on hoverFade edges (mask gradient)

Timing and spacing

Loop duration18s

Seconds for one full group to travel across. Higher is slower.

Gap between items48px

Spacing between repeated items along the scroll axis.

Fade width64px

Width of each faded edge. Only applies when Fade edges is on.

Items (one per line)Each line becomes one chip in the scrolling strip. Blank lines are ignored.Class nameThe CSS targets .marquee with __track, __group, and __item children.

CSS

.marquee {
  overflow: hidden;
  display: flex;
  -webkit-mask-image: linear-gradient(to right, transparent, black 64px, black calc(100% - 64px), transparent);
  mask-image: linear-gradient(to right, transparent, black 64px, black calc(100% - 64px), transparent);
}

.marquee__track {
  display: flex;
  flex-direction: row;
  flex-shrink: 0;
  min-width: max-content;
  gap: 48px;
  animation: marquee-left 18s linear infinite;
}

.marquee__group {
  display: flex;
  flex-direction: row;
  flex-shrink: 0;
  align-items: center;
  gap: 48px;
  min-width: max-content;
}

.marquee:hover .marquee__track {
  animation-play-state: paused;
}

@keyframes marquee-left {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .marquee__track {
    animation: none;
    transform: none;
  }
}

The track holds two identical groups and animates by 50 percent of its own size, so the duplicate slides into place exactly as the original leaves. That is what hides the wrap.

HTML markup

<div class="marquee">
  <div class="marquee__track">
    <div class="marquee__group">
      <span class="marquee__item">Breaking news</span>
      <span class="marquee__item">Market update</span>
      <span class="marquee__item">Weather alert</span>
      <span class="marquee__item">Sports scores</span>
      <span class="marquee__item">Traffic report</span>
    </div>
    <div class="marquee__group" aria-hidden="true">
      <span class="marquee__item">Breaking news</span>
      <span class="marquee__item">Market update</span>
      <span class="marquee__item">Weather alert</span>
      <span class="marquee__item">Sports scores</span>
      <span class="marquee__item">Traffic report</span>
    </div>
  </div>
</div>

The second group carries aria-hidden="true" so screen readers announce the content once, not twice.

Tailwind classes (container)

flex overflow-hidden

Tailwind classes (track)

flex flex-row shrink-0 min-w-max gap-[48px] hover:[animation-play-state:paused] [animation:marquee-left_18s_linear_infinite]

Keyframes for Tailwind

/* Add to your global stylesheet or tailwind.config keyframes: */
@keyframes marquee-left {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

Tailwind utilities cannot declare keyframes, so add this once to your global CSS or to the keyframes section of your Tailwind config. The arbitrary-value animation class then references it.

Why not the marquee tag

Obsolete elementThe HTML <marquee> element is non-standard and flagged obsolete. Browsers may drop support at any time, so new sites should avoid it.
Seamless loopThe old element snapped back to the start. Duplicating the content and translating by one group makes the CSS version loop without a visible reset.
Respects motion settingsThe CSS version honors prefers-reduced-motion and can pause on hover, which the original element could not do.
Full controlSpeed, gap, direction, and fade edges are all plain CSS you can tweak, theme, and reuse, with no scripting required.

How to use

Pick a preset (News ticker, Logo wall, Announcement bar, or Vertical notices) or start from the defaults.
Choose a scroll direction (left, right, up, or down) and toggle pause on hover and fade edges to taste.
Tune the loop duration, gap, fade width, and (for vertical marquees) the height while the live preview updates instantly.
Type your items one per line and rename the scoped class if you want it to match your project.
Copy the CSS and HTML, or the Tailwind classes plus the keyframes snippet, then paste them into your site.

About this tool

CSS Marquee Generator builds a smooth, infinitely scrolling marquee using nothing but CSS, the modern and accessible replacement for the obsolete HTML marquee element, and shows the result in a live preview that uses the exact CSS the tool will copy. The classic marquee element is non-standard and flagged obsolete, so browsers can remove it at any time and it offers no real control over timing, pausing, or motion preferences. The CSS approach solves all of that. The technique is simple and dependency-free: a container clips its overflow, an inner track is laid out with flexbox, and the content is rendered twice, an original group plus an aria-hidden duplicate. The track animates with a keyframe that translates it by exactly fifty percent of its own size, which equals one full group, so the moment the first copy scrolls out of view the duplicate has already taken its place and the loop continues with no visible jump, reset, or gap. That is the seamless trick the old element never managed. You can scroll in any of four directions: left and right translate on the X axis for a news ticker or logo wall, while up and down translate on the Y axis for a vertical column of notices. Controls cover the loop duration in seconds (how long one group takes to traverse, which is the number people actually reason about), the gap between repeated items, an optional pause-on-hover behavior, optional fade-out mask edges with an adjustable fade width, and the viewport height for vertical marquees. You type your items one per line and they become the scrolling chips, and you can rename the scoped class so the output drops cleanly into any project without leaking styles. The generated CSS is production-ready and accessible by default. The duplicated content carries aria-hidden so screen readers announce the text once rather than twice, and a prefers-reduced-motion media query stops the animation for visitors who ask their operating system to reduce motion, leaving the text readable and still. Output ships three integrations at once: a scoped CSS block keyed to your class name with the container, track, group, keyframes, hover-pause, and reduced-motion rules; ready-to-paste HTML markup that matches the class names; and a Tailwind v3+ arbitrary-value shorthand with a separate keyframes snippet to add to your global CSS or Tailwind config, since utility classes cannot declare keyframes on their own. Everything runs locally in your browser. The text you type, the colors, the timing, and the class names never leave your device.

Free to use. Works in your browser. No signup, no login.

Related tools

CSS Marquee Generator

How to use

About this tool

You may also like

CSS Animation Generator

CSS Scroll Snap Generator

CSS Transition Generator

CSS Loading Spinner Generator

Cubic Bezier Generator

CSS Gradient Generator