OneTaskBy Tim King · Updated
CSS Marquee Generator
Scrolling Text Marquee With Separators, Two Opposite Rows and Outline Text
OneTask is free, with no sign-up, and built by one person.
If this tool saved you time, a coffee helps keep new ones coming.
How the CSS Marquee Generator works
A CSS marquee is a band of large text that scrolls sideways in an endless loop, the modern way to do what the old marquee tag did. Enter your phrases, pick a separator, rows and colours, and copy pure HTML and CSS.
Big scrolling words are a popular way to add energy to agency sites, portfolios, event pages and product launches. Two rows moving in opposite directions, one solid and one outlined, is a classic editorial look.
How the CSS marquee loops without a gap
Each row holds your phrases four times in a flex track that is as wide as its content. The animation moves the track left by exactly half its width and then starts again. Because the second half is identical to the first, the jump back is invisible and the loop looks endless. Even rows run the same animation in reverse.
Why not the marquee tag?
The <marquee> element was never part of a standard, is marked obsolete, and cannot be paused or
styled well. A CSS animation is smooth, easy to restyle, pauses on hover and respects the reduced
motion setting, which stops the scrolling entirely for visitors who ask for it.
Accessibility
Screen readers read the phrases once. The repeated copies, separators and the second row are
hidden with aria-hidden so the words are not announced four or eight times.
FAQ
How do I change the speed?
Change the animation duration on .marquee-track. Because the track distance depends on the text
length, longer phrases scroll faster at the same duration, so adjust the seconds until the speed
feels right.
Why is there a gap at the end of the loop?
A gap appears when one copy of your phrases is narrower than the screen. Add more phrases or another copy of the spans inside the track, keeping the total copies even, so half the track is always wider than the widest screen.
Can I put links or images in the marquee?
You can, but moving links are hard to click and fail accessibility guidance for moving content. Keep the marquee decorative, and put any important links in normal static content nearby.
Does the marquee pause for users who dislike motion?
Yes. Under the reduced motion media query the animation is switched off, so the first copy of the phrases simply sits still. It also pauses when the pointer hovers over it.
See also: all UI Components tools, Layout & Spacing, Shadows & Motion, Shapes & SVG, Forms & Inputs, Colour.
Related tools
Logo Scroller
Build a seamless infinite logo marquee in pure CSS.
Text Animation
Animate a headline letter by letter and copy the CSS.
Parallax Builder
Build a layered CSS parallax section with scroll-driven animations.
Hover Effect Builder
Build animated hover effects for buttons and links.
Gradient Text Generator
Fill headline text with a CSS gradient and copy the code.