在元素上添加水平和垂直渐变淡出效果

Question

有没有一种方法可以实现从左到右的背景渐变，从深红色到浅红色（仅作为示例），但同时还有一个从顶部100％不透明度到底部0％不透明度的渐变？

这不同于对角线渐变，它是在X轴上具有颜色和在Y轴上具有透明度的渐变。

我一直在尝试看能否做到，但无法想出方法。

【编辑】

这是我所拥有的图片。 这只是Bootstrap模板中的一个。

正如您所看到的，我从左侧（较暗的红色）到右侧（较浅的红色）渐变。

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

正如您在这里看到的那样，选择对角线解决方案后，左侧边缘仍然非常锐利。我想要的是整个底部逐渐变为白色，即在Y轴上使用透明度渐变，同时保留从左到右的颜色渐变在X轴上。

- Mormoran

---

可能重复：https://stackoverflow.com/questions/28052238/css3-with-linear-gradient-for-two-directions 不确定它是将它们合并还是只是做两个分开的。 - Pete

你能发布一张预期结果的图片吗？这是可能的，但我不确定预期的结果。 - Salman A

可能是某种径向渐变...或者是'圆锥形'。 - Paulie_D

很难做到预期的结果，我不擅长使用 Photoshop 创造图像。给我一分钟。 - Mormoran

我添加了一些我已经拥有的和我想要实现的例子。 - Mormoran

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

- Temani Afif

---

这个最接近我想要实现的效果。非常感谢，我不知道可以连接梯度。 - Mormoran

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>

- Paulie_D