如何使用CSS在网页顶部设置渐变色背景？

Question

我想在网页顶部设置一个渐变色的背景，css可以实现吗？
如图所示

css3可以实现吗？

Answer 1

宽高固定的话用上面的 clip-path 就行了，如果需要自适应的话可以把背景做成 SVG:

Codepen

Answer 2

css实在是博大精深，斗胆回答一下，欢迎讨论
我觉得可以部分实现，不过有一定的局限性，2种方案：

1. background+clip-path:path

background: linear-gradient(to bottom, #4A90E2, #ffffff);
clip-path: path('M0,100 C150,50 350,150 500,100 L500,0 L0,0 Z');

这种可以实现曲线，但是没办法搞百分比；

2. background+clip-path:polygon+rotateX

 background: linear-gradient(to bottom, #4A90E2, #ffffff);
 clip-path: polygon(0 100%, 0 60%, 25% 65%, 50% 55%, 75% 65%, 100% 60%, 100% 100%);
 transform: rotateX(180deg);

这种可以搞百分比，但是不是曲线

另外上面两种都是对元素做裁剪，所以其实也并不符合题主要求的背景，看看有没有更好的答案吧

Answer 3

用 mask-image ，只要有张 黑白图，啥曲线都不在话下