css实现背景渐变叠加

线性渐变效果图:

.box{
      width: 100vw;
      height: 100vh;
      background:linear-gradient(to bottom,transparent,#fff 30%),linear-gradient(to right,pink,skyblue);
    }

径像渐变效果图：

.box{
      width: 100vw;
      height: 100vh;
      background:linear-gradient(to bottom,transparent,#fff 300px), radial-gradient(90% 200px at left top,pink,transparent),radial-gradient(60% 200px at right top,rgb(45, 229, 25),transparent);
    }