Home / Motion / Marquee Ticker
Marquee Ticker CSS Template, Free with Live Demo
Free CSS marquee template for a design studio. Endless scrolling client logos, reviews and a big text line that pause on hover, with faded edges. Live demo. The example is Northline, a design studio.
What is marquee ticker?
A marquee is a line of content that keeps scrolling sideways forever, like a news ticker. It is a popular way to show client logos, reviews or a big statement without taking much space.
The content is written twice in a row, and the track slides left by exactly half its width, so the loop never shows a gap. It pauses when you hover or tab into it, and the edges fade out with a mask.
Good for
- Client and partner logos
- Customer reviews
- Announcements and offers
- Big brand statements
What you get in this template
- Gap free loop by doubling the content
- Pause on hover and keyboard focus
- Faded edges with a CSS mask
- Rows with different speeds and directions
- Stops and wraps for reduced motion
The key CSS
This is the part that makes the marquee ticker look work. Copy it into your own project.
.mq { overflow: hidden;
mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.track { display: flex; width: max-content;
animation: scroll var(--t, 30s) linear infinite; }
.mq:hover .track { animation-play-state: paused; }
@keyframes scroll { to { transform: translateX(-50%); } }How to use it
- Click Download HTML file above.
- Open the file in any code editor, like VS Code.
- Change the text, colors and links to match your project. Colors are at the top of the style tag.
- Upload it to any host, such as GitHub Pages, Netlify or your own server. It is one file with no build step.
Questions people ask
How do you make an infinite marquee in CSS?
Put the items in a flex track twice, then animate the track from translateX(0) to translateX(-50%). When it reaches half, it looks exactly like the start.
Is the old HTML marquee tag still OK?
No. It is obsolete. The CSS version is smoother, accessible and easy to pause.
How do I stop screen readers reading the logos twice?
Add aria-hidden="true" to the copied set, as this template does.
More Motion designs
061. Scroll Driven Animation
Volt Ride, an e-bike product page
062. View Transitions
Fork and Field, a recipe site
063. Micro Interactions
Streak, a habit tracker
064. Layered Parallax
Pinecrest, a campground
066. Morphing Blobs
Bloom, a therapy practice
067. Hover Reveal
Studio Halden, an interior design studio
068. Staggered Entrance
Pipeline, a CRM landing page
069. Skeleton Loaders
Morning Brief, a news app