Seamless scrolling strip

CSS Marquee Generator

Build a smooth, seamless scrolling text or logo strip. Adjust speed, direction and gap, then copy the ready-to-use CSS.

Ready-to-use HTML + CSS

How it works

1

Type your text

Enter the message or ticker content you want scrolling across the strip.

2

Tune speed and direction

Set the loop duration, spacing and whether it pauses on hover.

3

Copy the snippet

Get gapless HTML and CSS that loops seamlessly forever.

FAQ

How is the loop kept seamless?

The content is duplicated once inside the track, and the animation moves it exactly 50% of the track's width, so the second copy lines up perfectly as the first scrolls off.

Can I use logos or images instead of text?

Yes. Replace the text spans in the generated HTML with img tags or any other inline content; the animation works the same way.

Does pausing on hover affect accessibility?

Pausing on hover can make constantly moving content easier to read, which is a good practice for users who find motion distracting.

Try other tools

TYPECSS Typing Effect GeneratorAnimated typewriter text. KFCSS Animation VisualizerBuild keyframes visually. WAVEWave Divider CreatorShape SVG section dividers.