Cell count

Cell width (px) — 0 = auto

Cell spacing (px)

Speed (px/second)

Direction

Pause on hover

Seamless (auto duplicate content)

Tip: To create a seamless animation, the generator automatically duplicates the content and animates the first half.

Preview

Distance: 0px — Duration: 0s

CSS Marquee Generator

What is CSS Marquee?

A CSS Marquee is an effect that allows text, images, or other content to scroll continuously across a container, either horizontally or vertically. This effect is commonly used for news tickers, stock updates, or promotional banners on websites. While the traditional HTML <marquee> element is deprecated, modern implementations rely on CSS animations and keyframes to achieve smooth scrolling.

How CSS Marquee Works?

The marquee effect is typically created using CSS animations. By animating the transform: translateX() or translateY() property, content can move from one side of the container to the other. For a smooth, continuous scroll, the content is often duplicated to avoid gaps when it reaches the end.

Basic Syntax

Here is a simple horizontal marquee using CSS animations:

.marquee {
  display: inline-block;
  white-space: nowrap;
  animation: scroll 10s linear infinite;
}

@keyframes scroll {
  0% { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}

Seamless Scrolling (Auto Duplicate Content)

The term Seamless in the context of a marquee means that the scrolling content appears continuous without any visible gaps or pauses. This is achieved by automatically duplicating the content so that as the first copy scrolls out of view, the second copy immediately follows, creating an infinite loop effect.

.marquee-seamless {
  display: inline-block;
  white-space: nowrap;
  animation: scroll 10s linear infinite;
}

/* Duplicate content in HTML to create seamless effect */
<div class="marquee-seamless">
  <span> Scrolling Text or Cell </span>
  <span> Scrolling Text or Cell </span>
</div>

Vertical Marquee

You can also create vertical scrolling content by animating the translateY() property instead of translateX():

.marquee-vertical {
  display: block;
  animation: scroll-vertical 8s linear infinite;
}

@keyframes scroll-vertical {
  0% { transform: translateY(100%); }
  100% { transform: translateY(-100%); }
}

Customizing Marquee Effects

Change the animation-duration to speed up or slow down the scrolling.
Use linear timing for uniform motion or ease-in-out for acceleration and deceleration effects.
Duplicate content to achieve seamless scrolling without gaps.
Combine horizontal and vertical scrolls for complex animations.
Apply different colors, fonts, or images to make your marquee more visually appealing.

Browser Support

CSS Marquee using animations and transforms is supported in all modern browsers including Chrome, Firefox, Safari, Edge, and Opera. Older browsers that relied on the <marquee> HTML element may require fallback solutions.

Conclusion

CSS Marquees are a versatile and visually engaging way to display moving content on websites. Using a CSS Marquee Generator allows designers to experiment with scroll direction, speed, gap, and seamless looping easily. The seamless (auto duplicate content) feature ensures that your scrolling content appears continuous, professional, and visually smooth without any interruptions.

Last update: 13. 08. 2025.