Create css marquee animation using this free Tool. Type the text items you want to scroll, choose direction, speed, gap and appearance - see a live preview and copy ready-to-use HTML + CSS for your site.
CSS Marquee Animation Options
Separate each marquee item with a newline. The tool will duplicate content as needed for a smooth continuous scroll.
Preview
HTML + CSS Code
How to Use the CSS Marquee Generator
Set your options: Choose the text, direction (left, right, up, down), speed, gap, colors, and font size to customize your marquee.
Preview instantly: The live preview updates in real time as you change settings, showing exactly how your marquee will look.
Copy the code: Click the Copy Code button to copy the generated HTML and CSS—no alerts, just smooth text updates.
Use in your project: Paste the copied code into your HTML file or WordPress editor. The marquee works with all modern browsers and is fully responsive.
Example Use Cases
Scrolling news or announcement tickers.
Showcasing featured products, offers, or updates.
Adding dynamic movement to website headers or banners.
Creating attention-grabbing text animations for landing pages.