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

我有一个黑色的背景，想在其中添加一个具有从透明色到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渐变在色标上平滑？

最佳答案

希望有一天，我们能够做到这一点:

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/

关于css - 如何使CSS渐变看起来平滑？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/41357829/