Opacity of content inside specific area of an element

Im trying to add a signifier to a scroll event agenda to let people know that they can view more of the agenda by scrolling on that section. I was thinking about having a lower opacity on the bottom part of the container to make the content at the bottom less visible. Does anyone know how to do this?


Here is my site Read-Only: https://preview.webflow.com/preview/centurion-live-stream?utm_medium=preview_link&utm_source=designer&utm_content=centurion-live-stream&preview=2992bc78943ef4edaeb4b670cf0b0258&mode=preview
(how to share your site Read-Only link)

Hey @tenzin

If I Understand what you are trying to achieve is that you have some section with set height and overflow auto and you want to add a bottom overlay, you can achieve that by adding a div block positioned absolutely or possibly fixed which has a height of eg. 50px and gradient inside that starts from a full color and ends with transparent color.

Let me know how it goes, cheers.

I tried that, Do you know how to change the opacity of the content/text inside the div block instead of the back-round?