您还记得□□□没有信号□□□□的旧电视□□□□上的静电□□噪音吗？或者当信□□□□号不好，画面失真□□□时？如果电视□□□□信号的概◤念早于您，这里有一□□张 GIF 可以准确□□□地表达我□□的意思。

我将在这◆里做的是□□□□一种 CSS 实验，以探索一□□□些利用渐□□□变错误的□□□□技巧。您可以在△业余项目□□中使用它▼来获得乐□□□□趣，但使用 SVG 更简洁，更适合实□□□□际项目。此外，效果在不□□同浏览器□□□□中表现不◎同，因此如果□□□□您要查看□□这些内容，最好在 Chrome、Edge 或 Firefox 中查看它□□□□们。

如您所见，第二个圆○圈比第一◣个圆圈渲□□□□染得更好，因为0.5%渐变中的□□□□两种颜色□□之间存在❖微小差异 ( )，而不是像□□第一个圆◤圈那样使□□□用整数值□□□的直接硬★色标。
再看一下，这次使用conic-gradient结果更明显的地方：

在制作这□□□些演示时，一个有趣□□的想法让□□□□我印象深★刻。与其一直▽修复失真，不如尝试□□□□反其道而□□□□行之？我不知道□□□会发生什□□□□么，但这是一□□个有趣的○惊喜！我采用了△圆锥渐变○值并开始□□□降低它们，使糟糕的◥抗锯齿效□□果看起来▽更糟。

你看到最□□□后一个有□□□□多糟糕吗？这是一种□□□在中间炒，没有什么□□是顺利的。让我们用▼较小的值★让它全屏◤显示：


我想你知□□道这是怎□□□□么回事。当我们对□□□渐变中的□□□□硬色停止❖使用非常○小的十进□□□□制值时，我们会得□□□□到一种奇□□□怪的扭曲□□□□视觉效果。我们的噪□□□音诞生了！
我们离我□□们想要的※颗粒状噪▼声还很远，因为我们□□□□仍然可以◇看到实际□□□的锥形梯◈度。但是我们□□□□可以将这□□些值减小◆到非常非□□□□常小的值——比如0.0001%——突然之间·就没有梯□□□□度了，只有纯粹□□□的颗粒感：
我们有一个噪音效果，它只需要一个 CSS 渐变。
我们可以□□通过在调▼整其位置□□□□的同时使□□梯度的大□□小非常大□□来增加随□□□□机性：
渐变应用◥于固定3000px正方形并□□□放置在60% 60%坐标处。在这种情□□□况下我们□□很难注意□□□到它的中□□□心。径向渐变□□也可以这□□□□样做：
为了让事·情变得更□□□□加随机（并且更接□□□□近真实的□□□噪声效果），我们可以□□□结合两个◣梯度并使□□□□用background-blend-mode来平滑事□□□情：
我们的噪❖音效果是□□□完美的！即使我们◆仔细观察○每个示例，也没有任□□□何梯度的□□□□痕迹，而是美丽□□的颗粒状◢静态噪声。我们刚刚□□□□将那个抗□□□锯齿错误•变成了一□□□个巧妙的□□功能！