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.

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

  1. Set your options: Choose the text, direction (left, right, up, down), speed, gap, colors, and font size to customize your marquee.
  2. Preview instantly: The live preview updates in real time as you change settings, showing exactly how your marquee will look.
  3. Copy the code: Click the Copy Code button to copy the generated HTML and CSS—no alerts, just smooth text updates.
  4. 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