MegaTech Webflow template features three infinity marquee sliders, each requiring custom CSS to apply a fade or gradient mask effect. Below are the details for each slider and its corresponding CSS code.

Logo strip infinity marquee

This horizontal marquee displays logos with a fade effect on both sides.

/* Left & Right Marquee Mask (Logo Strip) */

.marquee-row.left-and-right-marquee-gradient-mask {
  -webkit-mask-image: **linear-gradient(90deg, rgba(217, 217, 217, 0) 7.2%, #9B9B9B 21.59%, #888 76.6%, rgba(115, 115, 115, 0) 91.84%) !important**;
}

Horizontal testimonials infinity marquee

This slider showcases testimonials horizontally with a bottom fade effect.

/* Bottom Marquee Mask (Horizontal Testimonials Slider) */

.bottom-marquee-gradient-mask {
  -webkit-mask-image: **linear-gradient(180deg, #D9D9D9 0%, rgba(115, 115, 115, 0) 83%) !important**;
}

Vertical testimonials infinity marquee

This slider presents testimonials vertically with fade effects at both top and bottom.

/* Top & Bottom Marquee Mask (Vertical Testimonials Slider) */

.bottom-and-top-marquee-gradient-mask {
  -webkit-mask-image: **linear-gradient(180deg, rgba(217, 217, 217, 0) 0%, #B4B4B4 40%, #A8A8A8 50%, #9E9E9E 60%, rgba(115, 115, 115, 0) 100%) !important**;
}

Implementation

1. Each CSS snippet should be applied to its respective marquee element using the appropriate class name.
2. The gradient masks create a smooth fade effect, enhancing the visual appeal of the infinite scroll.