Infinite Logo Marquee CSS

A row of client or partner logos sliding continuously in one direction.

The seamless loop depends on duplicating the logo list in the markup and translating the track by exactly half its width. When the animation restarts, the second copy is sitting where the first one started, so nothing appears to move. The duplicate is required, not decorative.

Hovering pauses it with animation-play-state. The faded edges are two pseudo-elements holding gradients that match the page background, so change those if your background is not white.

529

#css

#animation

#marquee

#infinite scroll

#logo slider

#slider

#ui

Run /HTML *CSS ()JS Output Console0 Live Updates Focus

.marquee-container {
  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  overflow: hidden;
  background: #fff;
  padding: 40px 0;
  white-space: nowrap;
  position: relative;
}

.marquee-container::before,
.marquee-container::after {
  content: "";
  position: absolute;
  top: 0;
  width: 100px;
  height: 100%;
  z-index: 2;
}
.marquee-container::before {
  left: 0;
  background: linear-gradient(to right, #fff, transparent);
}
.marquee-container::after {
  right: 0;
  background: linear-gradient(to left, #fff, transparent);
}

.marquee-content {
  display: inline-flex;
  animation: scroll 20s linear infinite;
}

.marquee-container:hover .marquee-content {
  animation-play-state: paused;
}

.logo-item {
  margin: 0 30px;
}

.logo-item img {
  height: 50px;
  opacity: 0.7;
  transition: opacity 0.3s;
  cursor: pointer;
}

.logo-item img:hover {
  opacity: 1;
}

@keyframes scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

Infinite Logo Marquee CSS

Share Code Snippet