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

Issue

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

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>

Answered By – Maharkus

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published