CSS Marquee Text Generator
0 to -50% on the axis.
CSS Marquee Text is a scrolling text effect that allows content to move horizontally or vertically across a container.
It is often used for news tickers, announcements, stock updates, or promotional banners.
Modern implementations rely on CSS animations rather than the deprecated HTML <marquee> tag, ensuring smoother performance and better browser compatibility.
The effect is achieved by animating the position of the text using CSS properties like transform: translateX() or translateY(). By controlling the animation speed, direction, and repeat behavior, you can create continuous scrolling text. For a seamless loop, content duplication is often used so that once the first copy scrolls out of view, a second copy appears immediately.
A simple horizontal scrolling text can be created with CSS animations:
.marquee-text {
display: inline-block;
white-space: nowrap;
animation: scroll 10s linear infinite;
}
@keyframes scroll {
0% { transform: translateX(100%); }
100% { transform: translateX(-100%); }
}
The term Seamless refers to a scrolling effect where the text appears to move continuously without visible gaps or pauses. This is achieved by automatically duplicating the content so that as one copy moves out of view, the next copy enters immediately, creating an infinite loop.
<div class="marquee-text-seamless">
<span>Scrolling Text</span>
<span>Scrolling Text</span>
</div>
.marquee-text-seamless {
display: inline-block;
white-space: nowrap;
animation: scroll 10s linear infinite;
}
To create vertical scrolling, animate 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%); }
}
CSS Marquee Text implemented with animations and transforms works across all modern browsers including Chrome, Firefox, Edge, Safari, and Opera. No JavaScript is needed for basic scrolling, making it lightweight and easy to integrate into any project.
CSS Marquee Text is a practical and visually engaging way to display moving text on websites. Using a CSS Marquee Text Generator allows designers to experiment with scrolling direction, speed, gaps, and seamless loops easily. The seamless (auto duplicate content) feature ensures that your text scrolls continuously without interruption, creating a professional and smooth effect for users.