Using CSS mask-image in marquee swiper

I want to create a marquee logo slider with a 'fade' effect on the left and right sides. I already know how to make a basic marquee logo swiper, but while searching, I discovered the mask-image CSS property!

Great! To achieve the fade effect on the left and right sides of your marquee logo slider, you can use a linear-gradient with the mask-image CSS property. Here's an example of how you can apply it:

In this code:

• The mask-image property is used to create the fade effect.
• The linear-gradient creates a gradient where the edges are transparent (rgba(0,0,0,0)) and the center is fully visible (rgba(0,0,0,1)).
• 90deg defines the direction of the gradient from left to right.
• The 5% and 95% values control the start and end of the opaque section, creating a smooth fade effect on both sides.

Use offset in gradient #

Instead of using percentage you can have fixed gradient size by using a custom property like so:

.logo-swiper {
	--mask-offset: 3rem;
	mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) calc(0% + var(--mask-offset)), rgba(0,0,0,1) calc(100% - var(--mask-offset)), rgba(0,0,0,0) 100%);
}

This gradient will make the edges of your marquee slider fade out, creating the desired effect.

Example #

See the red boxes on the left and right sides of the marquee slider? That's the fade effect created by the mask-image property.

Good luck sliding into infinity and beyond! 🚀

• Next: RGBA to Hex, converting transparent to solid hex!
• Previous: Using SVG clipPath for images