线性渐变作为第一个全屏视图的主体背景； 在那坚实的bg颜色之后

Question

My goal is to have a gradient gradually turning from white into blue from top to bottom. If I open the page, the final blue tone should be reached at the lower edge of my screen. If I scroll down any further, the final blue tone should consistently stay as a solid background color. How can I achive this in the simplest way possible? Old browser support is not important.

This version isn't working because the gradient loops every screen-height:

background: linear-gradient(0deg, blue 51%, white 100%);

Answer 1

You can do like below:

 html { background: linear-gradient(0deg, blue 51%, white) top/100% 100vh no-repeat blue; }

 <div style="height:2000px"></div>