How to Create CSS Marquee Scrolling Effects: The Modern Way Without the Deprecated Tag

The marquee is back,  but the <marquee> tag is not

If you have been building websites long enough, you remember the HTML <marquee> tag. Introduced in Internet Explorer in the 1990s, it scrolled text horizontally across the screen. It was widely used, universally disliked by designers, and eventually deprecated by the HTML specification. No modern browser vendor recommends using it.

But the visual effect of a continuous horizontal scroll of content is more popular than ever. Open any modern SaaS landing page, and you will likely see a logo bar scrolling smoothly across the screen, showcasing client logos, partner brands, or technology stack icons. This is the marquee effect, rebuilt properly with CSS animations.

The modern CSS marquee is:

• Performant. It uses CSS transform: translateX() animations, which are GPU-composited and run at 60fps without blocking the main thread.
• Accessible. It respects prefers-reduced-motion settings when implemented correctly.
• Semantic. It uses standard HTML elements (<div>, <span>, <img>) instead of a deprecated proprietary tag.
• Flexible. It works with text, images, cards, or any HTML content.

The complexity lies in the CSS setup. An infinite scroll effect requires duplicating the content to create a seamless loop, calculating the translation distance based on content width, and handling edge fading. This is tedious to write from scratch, especially when you need multiple marquees with different speeds and directions.

What does the CSS Marquee Generator do?

The CampaignMorph CSS Marquee Generator generates production-ready HTML and CSS for infinite-scrolling marquees. You configure the behaviour visually and copy the code.

Three content modes

Text mode

Enter custom text that scrolls continuously. Useful for announcements, ticker-style messages, or decorative text bands.

Logo mode

Preview with placeholder logo tiles. Replace the placeholder images with your actual logo files in the exported HTML. This is the most common use case for client/partner logo bars.

Card mode

Preview with card-style elements. Replace with your actual card components for scrolling testimonials, product features, or team members.

Configuration options

Output

The generator produces two code blocks:

1. CSS: the complete stylesheet including CSS custom properties, the @keyframes animation, and optional mask gradients
2. HTML: the markup structure with the duplicated content needed for seamless looping

Both code blocks are copy-ready. Paste them into your project and replace the placeholder content with your actual text, images, or components.

How does the CSS marquee technique work?

The duplication trick

The core of the infinite scroll effect is content duplication. The visible content is placed inside a container twice:

<div class="marquee-container">
  <div class="marquee-content">
    <!-- Your items here -->
  </div>
  <div class="marquee-content" aria-hidden="true">
    <!-- Same items duplicated -->
  </div>
</div>

Both copies sit side by side. The CSS animation translates both copies leftward by 100% of one copy's width. When the first copy scrolls fully off-screen, the second copy is in exactly the position the first started,  creating a seamless, infinite loop.

The animation

@keyframes scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(-100% - var(--marquee-gap)));
  }
}

.marquee-content {
  animation: scroll var(--marquee-duration) linear infinite;
}

The translateX(calc(-100% - var(--marquee-gap))) accounts for both the content width and the gap between items, ensuring the loop is perfectly seamless.

Using transform rather than left or margin-left is critical for performance. The GPU compositor handles CSS transforms and does not trigger layout recalculations.

Edge fading with CSS masks

The fade effect at the edges is achieved with CSS mask-image:

.marquee-container {
  mask-image: linear-gradient(
    to right,
    transparent,
    black 100px,
    black calc(100% - 100px),
    transparent
  );
}

This creates a gradient mask that fades the content to transparent at the left and right edges, preventing the hard visual cut where content appears and disappears.

Vertical scrolling

For vertical marquees (scrolling up or down), the same technique applies, but the container usesflex-direction: column, and the animation uses translateY() instead of translateX(). The container needs a fixed height so the content can scroll within it.

Common use cases

Client and partner logo bars

The most popular use case. A horizontal strip of logo images scrolls continuously, showing that well-known companies use your product. This is a trust signal on SaaS landing pages, agency websites, and portfolio sites.

Best practices:

• Use PNG or SVG logos with transparent backgrounds
• Convert logos to a consistent height (40–60px) before adding them. Use the Image Resizer to batch-resize
• Keep the animation speed moderate (15–25 seconds per cycle) — too fast feels frantic
• Add pause on hover so users can read the logos

News ticker and announcements

A scrolling text band for announcements, promotions, or live updates. This is commonly seen at the top of e-commerce sites ("Free shipping on orders over $50 • New collection available • Sale ends Sunday").

Testimonial scrollers

Scrolling testimonial cards create a dynamic social proof section. Each card contains a quote, the author's name, and an optional photo. The continuous scroll implies a large volume of positive feedback.

Technology stack display

Developer-focused landing pages use logo marquees to show supported technologies, integrations, or frameworks. This is functionally identical to the client logo bar but with technology icons.

Event sponsor displays

Event websites and conference pages use scrolling sponsor logos, often tiered by sponsorship level (platinum sponsors scroll larger, bronze sponsors scroll smaller).

Accessibility considerations

Continuous motion can be problematic for users with vestibular disorders or motion sensitivity. Follow these guidelines:

Respect prefers-reduced-motion

Always include a media query that pauses or turns off the animation for users who have enabled reduced motion in their operating system settings:

@media (prefers-reduced-motion: reduce) {
  .marquee-content {
    animation-play-state: paused;
  }
}

Provide pause controls

The pause on hover feature built into the generator allows mouse users to stop the animation. For keyboard and touch users, consider adding an explicit pause/play button.

Use aria-hidden on the duplicate

The duplicated content exists only for the visual loop effect. Mark it with aria-hidden="true" so screen readers do not read the same content twice. The generated HTML includes this attribute automatically.

Do not rely on marquee content for critical information

If the scrolling text contains essential information (pricing, deadlines, legal notices), also present that information in a static format elsewhere on the page. Users who have motion disabled or who use screen readers should not miss important content.

Tips for effective marquees

• Moderate speed. 15–25 seconds per cycle is the sweet spot. Faster feels anxious; slower feels broken.
• Consistent item sizes. In logo bars, resize all logos to the same height for visual consistency. Different-sized logos look unprofessional.
• Use edge fading. The gradient mask at the edges prevents the jarring appearance and disappearance of items, making the scroll feel polished.
• Limit to one or two per page. Multiple marquees competing for attention reduce the effectiveness of each one.
• Mobile test. Ensure the marquee does not create horizontal overflow. Set overflow: hidden on the container.

Frequently asked questions

1. Is the HTML <marquee> tag still supported?

The <marquee> tag still renders in most browsers for backward compatibility, but it is officially deprecated in the HTML specification. It is not recommended for use. Modern CSS animations achieve the same effect with better performance, accessibility, and control.

2. Can I create a vertical scrolling marquee?

Yes. The CSS Marquee Generator supports four directions: left, right, up, and down. Vertical marquees use translateY() instead of translateX().

3. Does the marquee work without JavaScript?

Yes. The generated marquee is pure CSS. No JavaScript is required for the animation itself. The only case where JavaScript helps is adding a programmatic pause/play button.

4. Is the CSS Marquee Generator free?

Yes. The tool runs in your browser, requires no sign-up, and produces production-ready HTML and CSS with no watermarks or usage limits.

5. Can I use the marquee in React, Vue, or Angular?

Yes. The generated HTML and CSS work in any framework. Copy the CSS into your stylesheet and adapt the HTML to your component structure.

6. How do I make the marquee pause on hover? Add animation-play-state: paused on hover:

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

The generator includes this automatically when the "Pause on hover" option is enabled.

Try the free CSS Marquee Generator.

The CampaignMorph CSS Marquee Generator creates modern, high-performance infinite-scrolling marquees with complete HTML and CSS output. Configure direction, speed, fading, and hover behaviour,  then copy the code: no JavaScript, no deprecated tags, no sign-up.

For related tools, explore the CSS Shape Animator, CSS Shape Generator, SVG Shape Generator, and CSS Gradient Generator.

Sources

• HTML Living Standard (WHATWG): the <marquee> element is listed as obsolete and non-conforming
• W3C CSS Animations Level 1: specification for @keyframes and animation properties
• W3C CSS Masking Module Level 1: specification for mask-image used in edge fading
• MDN Web Docs: documentation for transform, translateX(), animation, and prefers-reduced-motion
• Web Content Accessibility Guidelines (WCAG) 2.1; Success Criterion 2.2.2 (Pause, Stop, Hide) and Success Criterion 2.3.3 (Animation from Interactions)