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)
);

看起来好多了：

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)
);

Bot现在，我们有这个：

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

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

2 个答案: