从奇怪的 CSS 渐变错误中制作静态噪声

👋 本文中的演示尝试使用与 CSS 渐变和次像素渲染相关的非标准错误。它们的行为可能在未来随时发生变化。它们也相当沉重。我们在您点击加载时异步提供它们，但仍然想提醒您，以防您的笔记本电脑风扇开始旋转。

您还记得那些没有信号的旧电视机上的静态噪声吗？或者当信号不好，图像失真时？如果电视信号的概念早于您，这里有一个 GIF 准确地展示了我的意思。

查看图片 (包含自动播放的媒体)

是的，我们将只使用 CSS 来做一些类似的事情。以下是我们将制作的内容

在我们开始深入研究代码之前，我想说，除了我将要向您展示的方法之外，还有更好的方法来创建静态噪声效果。我们可以使用 SVG、<canvas>、filter 属性等。事实上，Jimmy Chion 写了一篇关于如何使用 SVG 实现此效果的好文章。

我将在这里进行的是一种 CSS 实验，探索利用渐变错误的一些技巧。您可以将其用于您的个人项目以获得乐趣，但在真实项目中使用 SVG 更干净、更合适。此外，效果在不同浏览器中的表现也不同，因此如果您正在查看这些内容，最好在 Chrome、Edge 或 Firefox 中查看。

让我们制造一些噪音！

为了制作这种噪声效果，我们将使用… 渐变！不，没有秘密成分或新的属性可以实现它。我们将使用已经存在于我们的 CSS 工具箱中的东西！

这种“技巧”依赖于渐变在抗锯齿方面很差的事实。您知道使用硬停止颜色时会出现的锯齿状边缘吗？是的，我在大多数文章中都提到了它们，因为它们有点烦人，我们总是需要添加或删除一些像素来使它们变得平滑。

如您所见，第二个圆圈比第一个圆圈渲染得更好，因为渐变中的两种颜色之间存在微小的差异（0.5%），而不是像第一个圆圈那样使用直接的硬颜色停止，使用像整个数字这样的值。

这里还有另一个例子，这次使用的是 conic-gradient，结果更加明显

我在制作这些演示时，突然想到一个有趣的想法。与其一直修复失真，为什么不尝试做相反的事情呢？我不知道会发生什么，但这是一个有趣的惊喜！我取了圆锥渐变的值，并开始降低它们，使可怜的抗锯齿结果看起来更糟糕。

您是否注意到最后一个有多糟糕？它在中间有点乱，没有任何东西是平滑的。让我们用更小的值将其全屏显示

我想您已经知道要往哪里走了。当我们对渐变中的硬颜色停止使用非常小的十进制值时，我们会得到一种奇怪的失真视觉效果。我们的噪音诞生了！

我们离想要的颗粒状噪声还很远，因为我们仍然可以看到实际的圆锥渐变。但是我们可以将值降低到非常非常小的值——例如 0.0001%——突然之间，不再有渐变，而是纯粹的颗粒感

瞧！我们有了噪声效果，而这一切只需要一个 CSS 渐变。我敢打赌，如果我在解释之前就向您展示这一点，您永远不会意识到您正在看渐变。您必须非常仔细地观察渐变的中心才能看到它。

我们可以通过使渐变的大小变得非常大，同时调整其位置来增加随机性

渐变应用于一个固定为 3000px 的正方形，并放置在 60% 60% 的坐标处。在这种情况下，我们几乎看不到它的中心。径向渐变也可以做同样的事情

为了使事物更加随机（并更接近真实的噪声效果），我们可以将两种渐变结合起来，并使用 background-blend-mode 来使事物变得平滑

我们的噪声效果完美无瑕！即使我们仔细观察每个示例，那里也找不到任何渐变的痕迹，而是一些美丽的颗粒状静态噪声。我们只是将抗锯齿错误变成了一个漂亮的功能！

既然我们有了它，让我们看看一些可能使用它的有趣示例。

动画显示无电视信号

回到我们开始的演示

如果您检查代码，您会看到我在其中一个渐变上使用 CSS 动画。它真的就是这么简单！我们所做的只是以闪电般快的持续时间（.1s）移动圆锥渐变的位置，这就是我们得到的结果！

我在一个单一 div CSS 艺术挑战中使用了这种相同的技术

颗粒状图像过滤器

另一个想法是将噪声应用于图像，以获得一种复古的外观。将鼠标悬停在每个图像上以查看没有噪声的图像。

我只在一个伪元素上使用一个渐变，并将其与图像混合，这得益于 mix-blend-mode: overlay。

如果我们使用 CSS filter 属性，我们可以获得更有趣的效果

如果我们再添加一个 mask，我们就可以制作更多效果！

颗粒状文字处理

我们也可以将这种相同的效果应用于文本。同样，我们只需要在 background-image 上使用几个链接的渐变，然后混合背景。唯一的区别是，我们还在使用 background-clip，这样效果就只会应用于每个字符的边界。

生成式艺术

如果您继续玩弄渐变值，您可能会得到比简单噪声效果更令人惊讶的结果。我们可以获得一些随机形状，看起来很像生成式艺术！

当然，我们离真正的生成式艺术还很远，它需要大量的努力。但看到用一种技术上被认为是错误的东西能实现什么，仍然令人满意！

怪物面孔

最后一个例子是为 CodePen 的 divtober 2022 合集 制作的

总结

我希望您喜欢这个小小的 CSS 实验。我们并没有真正学到什么“新东西”，但我们利用了渐变的一些小问题，并将它变成了有趣的东西。我再说一遍：这不是我会在真实项目中使用的东西，因为谁知道抗锯齿是否或何时会在未来的某个时间点得到解决。相反，这是我偶然发现的一个非常随机、愉快的惊喜。它也不容易控制，并且在不同浏览器中的表现不一致。

话虽如此，我还是很好奇您能用它做什么！您可以玩弄值，组合不同的层，使用 filter 或 mix-blend-mode，或者任何其他方法，您一定会得到一些非常酷的东西。在评论区分享您的创作——没有奖品，但我们可以得到一个不错的合集！