CSS Marquee Generator
Generate a modern CSS scrolling marquee for text or logos using keyframe animation, with control over direction and speed.
Last reviewed by the Radiatus Cloud team
Generate a modern CSS scrolling marquee without the deprecated tag.
Need this done properly for your business?
Radiatus delivers secure cloud, DevOps & compliance engineering.
Create a scrolling marquee with CSS
The old marquee HTML tag is long deprecated, but scrolling text and logo strips are still useful for announcements, tickers and partner logos. This generator produces a modern, standards-compliant marquee using CSS keyframe animation. You choose the scroll direction and the duration, which controls the speed, and the tool outputs the CSS along with the simple HTML structure it needs.
The content scrolls continuously and pauses on hover, a thoughtful touch that lets users read it.
Modern and controllable
Unlike the deprecated tag, a CSS marquee gives you full control over speed, direction and pausing, and it degrades gracefully. It works well for news tickers, scrolling announcements and horizontally moving logo walls. Because it is pure CSS, it is efficient and does not require any JavaScript.
Keep the scroll slow enough to read comfortably, and consider respecting the reduced-motion preference by disabling the animation for users who request it. All generation happens locally in your browser.
Notes on the generated code
Because the css marquee generator runs entirely in your browser, you can experiment with every option and watch the generated code update instantly, with nothing uploaded and no account required. The output is clean, standards-based CSS that works in any project without external libraries or a build step, so you can paste it straight into your stylesheet and refine it further by hand whenever you need to.
Related tools
- Color Converter — Convert colours between HEX, RGB, HSL, HWB and OKLCH, with alpha support. Runs in your browser and shows the live swatch for each format.
- Accessibility Color Contrast Checker — Check foreground and background colour contrast against WCAG thresholds, with the rules for text size, UI components and states.
- Typography Scale Generator — Generate a modular type scale from a base size and ratio, with fluid clamp() values for responsive layouts.
- Design Token Generator — Generate design tokens as CSS variables, JSON or platform formats, structured in the layers that make them maintainable.
Frequently Asked Questions
Why not use the marquee tag?
The marquee tag is deprecated and non-standard. A CSS keyframe animation achieves the same effect in a modern, supported way with more control.
Does the marquee pause on hover?
Yes. The generated CSS pauses the animation when the user hovers, giving them time to read the scrolling content.
How do I control the speed?
Set the animation duration in the generator. A longer duration scrolls more slowly, making the content easier to read.
Should I consider reduced motion?
Yes. Consider disabling the animation under the reduced-motion media query for users who prefer less movement, for accessibility.
Privacy & Security
Everything runs in your browser; nothing is uploaded.
How to Use
Choose the direction and speed, then copy the HTML and CSS.
Disclaimer: This tool is provided "as is" without warranty of any kind. Results are for educational and utility purposes.
Related Tools
Color Converter
DesignConvert colours between HEX, RGB, HSL, HWB and OKLCH, with alpha support. Runs in your browser and shows the live swatch for each format.
Accessibility Color Contrast Checker
DesignCheck foreground and background colour contrast against WCAG thresholds, with the rules for text size, UI components and states.
Typography Scale Generator
DesignGenerate a modular type scale from a base size and ratio, with fluid clamp() values for responsive layouts.