Streaming live at 10am (PST)

Blur at the Bottom of scroll?


#1

Hello, On my “Interested” page of my website is there any way to create a blur at the bottom the scroll instead of just having it be abruptly cutoff? Thanks!

Here is the link:
https://preview.webflow.com/preview/andrews-first-project-b39c0a?utm_source=andrews-first-project-b39c0a&preview=9a5f1f3654c8db41280af223b98ec3de


#2

Hi @Sneakers12

Sure! just put some bottom padding to your grid :slight_smile:

CloudApp


#3

Thank you but I think what I mean more is so that there is an initial blur always at the bottom the scroll. This page on Pinterest is a good example.


#4

Something like that?

CloudApp


#5

Yeah! Just like that! But without the darkening effect? How did you do that? Also any idea why there is a slight gap between the scroll fade and the Div block at the bottom?


#6

So here’s the steps:

  1. Create a new div inside div block 75
  2. Make it 80px height (or the height you want)
  3. Set its position to absolute, bottom
  4. Set a background gradient (play with it as you want)

Finally, for the little gap at the bottom, select the div block 69 and set the overflow to scroll.

Here’s a quick video to show you the steps:

CloudApp

Hope this helps! :slight_smile:


#7

Thank you for all your help Donald. But is there a way to gradient it back into the image instead of a color? As if the scroll is fading back into the image behind it.


#8

So essentially it would look like the scroll box is coming out of the image?


#9

Yes, like it was fading into the blurred image.