如何让CSS渐变看起来流畅？

Question

我有一个黑色的背景,并希望在内部添加一个块,从简单的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)
);

它看起来好多了:

CodePen上的比较演示

是否有更简单的方法使颜色停止时CSS渐变平滑？

Answer 1

我希望有一天，我们能得到这样的结果：

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

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

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