@keyframes scroll {
     0% {
         transform: translateX(0);
    }
     100% {
         transform: translateX(calc(-250px * 7));
    }
}
 .slider {
     background: white;
     box-shadow: 0 10px 20px -5px rgba(0, 0, 0, .125);
     height: 100px;
     margin: auto;
     overflow: hidden;
     position: relative;
     width: 100%;
     margin-top: -55px;
}
 .slider::before, .slider::after {
     background: linear-gradient(to right,red -10%, rgba(255, 255, 255, 0) 40%);
     content: "";
     height: 100px;
     position: absolute;
     width: 200px;
     z-index: 2;
}
 .slider::after {
     right: 0;
     top: 0;
     transform: rotateZ(180deg);
}
 .slider::before {
     left: 0;
     top: 0;
}
 .slider .slide-track {
     animation: scroll 30s linear infinite;
     display: flex;
     width: calc(250px * 14);
}
 .slider .slide {
     height: 100px;
     width: 250px;
}