Scrolling text is usually created today with CSS animation rather than the old <marquee> element. The basic idea is simple: place text inside a container that hides overflow, then animate the text across that container with transform: translateX(...) or translateY(...).
The simplest modern pattern
A horizontal scroller needs two pieces: a viewport and a moving element. The viewport uses overflow: hidden; the moving element stays on one line and receives a keyframe animation. A right-to-left version can start beyond the right edge and finish beyond the left edge.
<div class="scroll-viewport">
<p class="scroll-message">Site maintenance starts at 22:00 UTC.</p>
</div>
.scroll-viewport { overflow: hidden; }
.scroll-message {
width: max-content;
white-space: nowrap;
animation: move-left 12s linear infinite;
}
@keyframes move-left {
from { transform: translateX(100vw); }
to { transform: translateX(-100%); }
}
@media (prefers-reduced-motion: reduce) {
.scroll-message { animation: none; white-space: normal; }
}
The exact transform values depend on the layout. For a polished reusable component, measure the viewport and content or use a duplicated-track technique for a seamless loop.
Direction and speed
For horizontal motion, left and right are mirror images. Vertical credits use translateY. “Speed” is easiest to expose as animation duration: a larger duration means slower movement. Long messages usually need a longer duration than short messages so the reading speed remains comfortable.
The main generator uses this duration model because it is predictable and easy to copy. It also provides presets for scroll, bounce, fade, typewriter, wave, zoom, slide-in, and vertical scrolling.
Make moving text optional, not mandatory
Animation should not be the only way to access important information. Generated output should stop motion for visitors who request reduced motion. Longer announcements should also provide a pause control or pause on hover/focus.
When to use a generator
Hand-written CSS is ideal when you need one fixed effect. A generator is faster when you want to compare directions, fonts, colors, container styles, or several animation types. It also reduces small mistakes such as missing overflow rules or forgetting a reduced-motion fallback.
Use the Scrolling Text Generator for general horizontal/running text, the Vertical Scrolling Text Generator for credits, and the GIF Scrolling Text Generator when you need an image file instead of HTML/CSS.