在元素上添加水平和垂直衰落渐变

Question

是否有一种方法可以使背景从左到右，从深红色到浅红色（仅作为示例），同时还可以从不透明度最高的100％降低到不透明度最低的0％？

它与对角渐变不同，它是X轴上带有颜色而Y轴上带有透明度的渐变。

我一直在尝试是否可以管理，但我想不出办法。

[编辑]

这是我所拥有的照片。这只是引导程序的模板之一。

如您所见，我有一个从左（较暗的红色）到右（较亮的红色）的渐变。

我还希望整个元素在底部逐渐变白，以使该部分的截止时间不是突然的，而是逐渐的。

正如您在此处看到的，使用对角线解，左侧的边缘仍然非常锋利。我想要的是使整个底面都淡化为白色，即Y轴上的透明渐变，而我仍然在X轴上具有从左到右的颜色渐变。

Answer 1

您可以使用多个渐变进行模拟：

Task.Supervisor.start_child/2

Answer 2

也许是从一个角开始的径向渐变

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

 ::before,
 ::after {
  box-sizing: inherit;
}

div {
  width: 80vw;
  height: 80vh;
  margin: 10vh auto;
  border: 1px solid black;
  background: radial-gradient(farthest-corner at left top, rgba(139, 0, 0, 1), rgba(255, 255, 255, 0));
}

<div></div>