Back to Snippets

Infinite Logo Marquee CSS

Show off your partners or clients with this infinite scrolling marquee. It uses CSS animations to loop the logos seamlessly, so there is no jarring jump when the list repeats, and it pauses when a user hovers over it.

523

#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