OneTaskBy Tim King · Updated
Logo Scroller
Pure CSS Seamless Logo Strip With Faded Edges, Pause on Hover and Reduced Motion
OneTask is free, with no sign-up, and built by one person.
If this tool saved you time, a coffee helps keep new ones coming.
How the Logo Scroller works
A logo scroller is the strip of customer or partner logos that glides sideways across a landing page without end. This logo scroller generator writes it in pure CSS: enter the names, set the speed, gap and direction, and copy the HTML and CSS.
The strip shows social proof without taking much room, which is why it usually sits just under the hero section. Moving logos catch the eye, and the loop means you can show more names than would fit across the screen at once.
How the logo scroller loops
The list of logos appears twice in a row inside one flex track. The track moves left by exactly half its own width, which is the width of one full set, and then the animation starts again. At that moment the second set sits exactly where the first one started, so the jump cannot be seen. The spacing is padding on each logo rather than a flex gap, so both halves are exactly equal and the loop stays seamless.
Accessibility
The copied set is marked aria-hidden, so screen readers read each name once. Pause on hover lets
visitors stop the motion, and anyone with reduced motion turned on sees a still, centred row of
logos instead of a moving strip.
FAQ
How do I use images instead of text?
Replace the text inside each list item with an <img> that has a fixed height, such as 32 pixels,
and alt text naming the company. Give the images in the copied set an empty alt="" as well as
keeping aria-hidden on their list items.
Why is there a gap or jump in my loop?
The two halves of the track are not the same width. That happens when a gap is added to the flex container, when the second set is missing a logo, or when images load at different sizes. Keep the spacing as padding on the items and give images a fixed width and height.
How fast should a logo scroller move?
Slow enough to read each name. About 30 to 40 seconds per loop suits eight logos; with more logos, raise the time so the speed stays the same. Fast marquees feel busy and are harder to read.
What if I only have three or four logos?
One set must be wider than the screen for the loop to look full. With only a few logos, repeat the list two or three times inside each half, or use a static logo wall instead of a scroller.
See also: all UI Components tools, Layout & Spacing, Shadows & Motion, Shapes & SVG, Forms & Inputs, Colour.
Related tools
Announcement Bar
Build a dismissible top-of-page announcement bar with rotating messages.
Hero Section Builder
Landing page hero sections with fluid headline and buttons.
Feature Grid Builder
Responsive icon-title-description feature grids for landing pages.
Animated Banner
Design an animated ad banner and export GIF or WebM.
Scroll Animation
Preview scroll reveal effects and copy the CSS or JS.