如何让CSS渐变看起来平滑？

Question

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

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 色标上的渐变平滑？

Answer 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>

Answer 2

有一天，我希望，我们有这个：

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

现在，我们有这个机器人：

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

如何让CSS渐变看起来平滑？

How to make CSS gradient look smooth?

css

gradient

linear-gradients

smoothing