CSS Marquee Generator
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.
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.
CSS Marquee Generator FAQs
The CSS Marquee Generator allows you to create smooth scrolling text animations using modern CSS only. You can customize text items, direction, speed, gap, font size, background, colors, and hover behavior with a live preview and one-click HTML + CSS code output.
The tool uses CSS keyframes and duplicated marquee items to create a seamless scrolling effect. When you update any setting (direction, speed, gap, etc.), the preview updates instantly and the generator outputs ready-to-use HTML + CSS code.
Yes, the generator supports four directions: Left, Right, Up, and Down. When choosing vertical directions, the tool automatically adjusts layout and height to ensure smooth scrolling in the preview.
To create a continuous loop without visible gaps, the script duplicates your items automatically. This ensures that the animation scrolls smoothly and loops correctly, regardless of your content length.
The speed value determines how long (in seconds) the animation takes to complete one full scroll. Lower values mean faster scrolling, while higher values produce slower movement.
The gap value adds spacing between each marquee item. This helps create a cleaner layout and better readability, especially when using multiple text items.
Yes. When the “Pause on hover” option is checked, the scrolling animation temporarily stops when the user hovers over the marquee. This is useful for announcing news, offers, or readable content.
Yes, the marquee animation uses fully modern and supported CSS (no deprecated <marquee> tag). It works on all major browsers including Chrome, Firefox, Safari, Edge, and mobile devices.
Click “Copy Code” inside the generator and paste the HTML + CSS directly into your website, WordPress editor, Elementor, or any HTML file. Everything is self-contained and works instantly.
Absolutely. The generator includes controls for background color, text color, font size, spacing, direction, speed, pause behavior, and more. You can also manually edit the CSS after copying it.