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.
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**;
}
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**;
}
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**;
}