Infinite Logo Carousel With blurred Entry/Exit Effects

Preview:

Description:

A pretty cool infinite-scrolling logo carousel built with pure CSS/CSS3.

Unlike traditional carousels, this one utilizes the CSS mask and backdrop-filter properties to produce a captivating blurred effect as logos enter and exit the screen. This design ensures a smooth, aesthetic transition without the logos abruptly popping in or out.

This carousel is perfect for displaying partner or sponsor logos on a website or landing page. The smooth infinite scroll creates an elegant presentation that catches the user’s eye. As each logo fades in and out, it maintains visual interest without being distracting.

How to use it:

1. Build the HTML structure for the logo carousel.

<div class="carousel">
  <div class="logos"></div>
  <div class="mask"></div>
</div>

2. The necessary CSS/CSS3 styles.

.carousel {
  --blur: 6px;
  --contrast: 105%;
  --speed: 13s;
  height: 250px;
  max-width: 700px;
  width: 100%;
  position: relative;
  .mask {
    position: absolute;
    inset: 0;
    background: #0000;
    backdrop-filter: blur(var(--blur)) contrast(var(--contrast));
    -webkit-backdrop-filter: blur(var(--blur)) contrast(var(--contrast)); /* so it works on Safari */
    -webkit-mask: linear-gradient(90deg, #000 50px, #0000 175px calc(100% - 175px), #fff calc(100% - 50px));
    pointer-events: none;
  }
  .logos {
    animation: moveBg var(--speed) linear infinite;
    position: absolute;
    inset: 0;
    background: url(YOUR LOGOS HERE.webp) 0 50% / 567px 75px repeat-x;
    -webkit-mask: linear-gradient(90deg, #0000 5px, #000 50px calc(100% - 50px), #0000 calc(100% - 5px));
  }
}
@keyframes moveBg {
  from { background-position: 0 50%; }
  to { background-position:  -1134px 50%; }
}