css - 如何使 CSS 渐变看起来平滑？

Question

我有一个黑色背景，想在里面添加一个 block ，其中包含从透明到 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

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

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/