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

Question

有没有办法让背景从左到右渐变，从深红色到浅红色（仅作为示例），同时从顶部 100% 不透明度到底部 0% 不透明度渐变？

它与对角渐变不同，它是 X 轴为颜色、Y 轴为透明度的渐变。

我一直在尝试看看我是否可以做到，但我找不到办法。

[编辑]

这是我所拥有的图片。它只是 bootstrap 的模板之一。

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

我还希望整个元素在底部淡入白色，以便该部分的截止不是突然的，而是渐进的。

正如您在这里所看到的，采用对角线解决方案时，左侧的边缘仍然非常锋利。我想要的是整个底部褪色为白色，即 Y 轴上的透明度渐变，而 X 轴上仍然有从左到右的颜色渐变。

Answer 1

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

body {
  height:100vh;
  margin:0;
  background:
   linear-gradient(to top,rgba(255,255,255,1),rgba(255,255,255,0)),
   linear-gradient(to right,black,white);
}