Color gradient only on a specific page position even if it has an infinite scroll

Color gradient only on a specific page position even if it has an infinite scroll

Problem Description:

I applied a css code to create a shadow on the initial part of the page (I have a social network and I would like to create the type of shadow created by Facebook on user profile pages, just to get an idea).
Everything would seem ok for some pages but not for others. That is, for short pages, the shading might be acceptable, but for long pages, the shading increases as the page length increases, almost encroaching on the page. I tried to set specific height values but without success, indeed if I set a "height" value an unwanted dividing line is created.

The code I’m using is as follows:

background: black;
background: -moz-linear-gradient(top, black 0%, #f0f2f5 10%);
background: -webkit-linear-gradient(top, black 0%, #f0f2f5 10%);
background: linear-gradient(to bottom, black 0%, #f0f2f5 10%);

Some idea?
Thank you!

Solution – 1

If you use pixel values instead of percentage values you can keep the gradient height uniform.

div {
  background: linear-gradient(to bottom, black 0px, #f0f2f5 50px);
  width: 100px;
}

body {
  display: flex;
}

<div style="height: 100px;"></div>
<div style="height: 400px;"></div>