Reference
CSS Marquee (Modern Equivalent)
The same scrolling effect as the classic tag, built with standards-compliant CSS @keyframes.
Live Tool
A fixed reference example — use the Marquee Generator for adjustable speed and direction.
marquee.css
Live
Preview
1How To Use
Follow these steps — no coding experience needed.
- Copy the style block and markup togetherBoth parts are needed — the keyframes and the wrapping div.
- Rename the class if neededAvoid clashing with existing .marquee-wrap classes on your site.
- Adjust the durationLower seconds = faster scroll.
2Example Output
What this code looks like once it's on a real page.
Because this uses standard CSS, it also respects a reduced-motion accessibility setting when written with a prefers-reduced-motion media query.
3Browser Compatibility
| Browser | Support | Notes |
|---|---|---|
| Chrome | ✓ Supported | Full support |
| Firefox | ✓ Supported | Full support |
| Safari | ✓ Supported | Full support |
| Edge | ✓ Supported | Full support |
| Opera | ✓ Supported | Full support |
| Mobile browsers | ✓ Supported | Full support, iOS & Android |
Supported in every current browser — Chrome, Firefox, Safari, Edge and Opera all render this identically, on both desktop and mobile.
→Related Pages
More tools that pair naturally with this one.