弯曲的线性渐变背景？答案

【问题标题】：Curved linear-gradient background?弯曲的线性渐变背景？
【发布时间】：2021-07-18 19:23:27
【问题描述】：

请原谅我可怕的绘画，但我真的不知道如何描述我正在寻找的东西。我目前有一个使用线性渐变的背景框

`linear-gradient(330deg, white 30%, grey 45%, white 0)`

它看起来类似于可怕的插图。但是，我的项目需要一个轻微的曲线，这显然是线性渐变无法提供的。有没有办法改变线性渐变，使得对角线有一条轻微的曲线？

我有什么：linear-gradient through box

我需要什么：curve through box

【问题讨论】：

欢迎来到 Stack Overflow Michael _ 你可能会发现这个答案很有用 >>> stackoverflow.com/questions/45494235/…
您希望每种颜色都有曲线还是只有顶部的颜色？

标签： css gradient

【解决方案1】：

这是你想做的吗

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<title>Document</title>
<style>
  div {
    background-image: radial-gradient(
      ellipse farthest-side at 92% 378%,
      #9fa4a9 21%,
      #7b7b7b 100%,
      #3e3f40 35%
    );
    width: 421px;
    height: 150px;
  }
</style>
</head>
<style></style>
<body>
<div></div>
</body>
</html>

【讨论】：

这是一个巨大的帮助。我能够对您的径向渐变进行一些编辑以使其恰到好处。非常感谢。
@MichaelHowell 当然您可以根据需要进行调整

【解决方案2】：

尝试使用radial-gradient 而不是linear-gradient。如果你玩它一点点，你可能会实现你想要的

详细了解radial-gradient：

【讨论】：