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

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);
}

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>

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

Adding horizontal and vertical fading gradients on an element

css

linear-gradients