Постепенное затенение в блоке с прокруткой

Question

Есть такой код - https://codepen.io/legeidaa/pen/XWjmqQx

<div class="stages__scroll">
                <div class="stages__scroll-item">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nihil, minima mollitia totam neque cumque sint possimus quis obcaecati quae quam magnam, vel laudantium sed.</div>
                <div class="stages__scroll-item">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nihil, minima mollitia totam neque cumque sint possimus quis obcaecati quae quam magnam, vel laudantium sed.</div>
                <div class="stages__scroll-item">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nihil, minima mollitia totam neque cumque sint possimus quis obcaecati quae quam magnam, vel laudantium sed.</div>
                <div class="stages__scroll-item">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nihil, minima mollitia totam neque cumque sint possimus quis obcaecati quae quam magnam, vel laudantium sed.</div>
                <div class="stages__scroll-item">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nihil, minima mollitia totam neque cumque sint possimus quis obcaecati quae quam magnam, vel laudantium sed.</div>
                <div class="stages__scroll-item">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nihil, minima mollitia totam neque cumque sint possimus quis obcaecati quae quam magnam, vel laudantium sed.</div>
</div>

Как сделать постепенную прозрачность scroll-item как на скриншоте?

Answer 1

Например в класс stages__scroll можно добавить это:

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

Взято отсюда: https://stackoverflow.com/questions/15597167/css3-opacity-gradient

БЛОГ НА HUSL

Постепенное затенение в блоке с прокруткой

Ответы (1 шт):