如何使 CSS 渐变看起来平滑？答案

【问题标题】：How to make CSS gradient look smooth?如何使 CSS 渐变看起来平滑？
【发布时间】：2017-05-12 11:42:16
【问题描述】：

我有一个黑色背景，想在里面添加一个简单的 CSS 渐变块，从透明到 0.7 白色：

linear-gradient(to right, 
    hsla(0, 0%, 100%, 0), 
    hsla(0, 0%, 100%, 0.76) 14%, 
    hsla(0, 0%, 100%, 0.76)
)

但这看起来很糟糕：

我发现的唯一方法是手动添加额外的色标。

background: linear-gradient(
    to right,
    hsla(0, 0%, 100%, 0),
    hsla(0, 0%, 100%, 0.05) 2%,
    hsla(0, 0%, 100%, 0.09) 3%,
    hsla(0, 0%, 100%, 0.2) 5%,
    hsla(0, 0%, 100%, 0.57) 11.5%,
    hsla(0, 0%, 100%, 0.69) 14%,
    hsla(0, 0%, 100%, 0.75) 16.5%,
    hsla(0, 0%, 100%, 0.76) 17.5%,
    hsla(0, 0%, 100%, 0.77)
);

而且看起来好多了：

The comparsion demonstration on CodePen

有没有更简单的方法让 CSS 渐变在色标上变得平滑？

【问题讨论】：

你可以查看这个帖子：stackoverflow.com/questions/13151331/smooth-css-gradients
在创建自己的问题之前，我已经阅读了它。这个问题没有解决方案。选择的答案只是建议不要使用除 0 和 100% 之外的色标。我想解决这个问题，而不是解决方法。
恐怕不行，但您可以使用这些示例中的基本设置codepen.io/taylorvowell/pen/BkxbC
@Roberrrt 除了«Faded» (5) – 0 和 80%^ 之外，没有中间有色标的线性渐变，但颜色太相同而无法看到色标。
啊，我明白了，它必须是线性的？

标签： css gradient linear-gradients smoothing

【解决方案1】：

我还不完全明白你打算做什么，但据我所知，你想在黑色背景上添加一个框，左侧从透明渐变（所以仍然是黑色) 为白色，透明度为 0.7 或#C2C2C2。如果那是您想要做的，我不会使用 hsl（因为基本颜色理论）而是使用 rgba。

看看这个：

<html>
<head>
<style>
#blackbg {
background-color: black;
height: 300px;
}

#grad1 {
    height: 200px;
    background: linear-gradient(to right, rgba(255,0,0,0), rgba(255, 255, 255, 0.7)); 
}
</style>
</head>
<body>

如果这不是您打算做的，或者您仍然对某些事情感到困惑，请随时问我。

<div id="blackbg">
<div id="grad1"></div>
</div>

</body>
</html>

【讨论】：

我想将此作为文本背景添加到带有图像背景的滑块上。它可以是深色或浅色，就像人们桌面上的壁纸一样。您可以在eco-vpk.ru 或此屏幕截图中看到它：imgur.com/a/73Ozc
好的，现在我明白了。但是你想在哪里添加渐变呢？产品在哪里？你是为 VKP 工作还是你想要达到的目标？
我在这个网站上工作，我想要平滑的渐变位于产品图片下方。
你能做到吗？或者你还需要帮助吗？ :)
该网站上的渐变与我的问题中的渐变相同。它是手动调整的，看起来很流畅。我想自动化它。

【解决方案2】：

希望有一天，我们得到了这个：

linear-gradient(
  to top,
  hsla(330, 100%, 45%, 0),
  cubic-bezier(0.45, 0, 0.5, 0.5),
  hsla(330, 100%, 45%, 1)
);

Bot 现在，我们有这个：

PostCSS 插件有 2 个选项：https://github.com/larsenwork/postcss-easing-gradients
允许您选择缓动功能的应用程序：https://larsenwork.com/easing-gradients/

【讨论】：