Как сделать переход в прозрачность блока при скроле?

Question

[Евгений Драган]

Здравствуйте!

Пожалуйста подскажите как сделать чтобы при скролле блоки уходили в прозрачность возле нижней и верхней грани, как показано на скрине, если сам фон в котором находятся блоки полу прозрачный и применен backdrop-filter: blur.


Сам пример: https://jsfiddle.net/yudshgt4/

Буду очень благодарен за помощь.

Comments

[Сергей Сергей]

css mask и градиенты

Answer 1

[Евгений Драган]

Спасибо Сергей Сергей

Решение:

mask-image: gradient(linear, left 90%, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
-webkit-mask-image: -webkit-gradient(linear, left 90%, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));