您還記得沒有信號的舊電視上的靜電噪音嗎？或者當信號不好，畫面失真時？如果電視信號的概念早于您，這里有一張 GIF 可以準確地表達我的意思。

我將在這里做的是一種 CSS 實驗，以探索一些利用漸變錯誤的技巧。您可以在業(yè)余項目中使用它來獲得樂趣，但使用 SVG 更簡潔，更適合實際項目。此外，效果在不同瀏覽器中表現不同，因此如果您要查看這些內容，最好在 Chrome、Edge 或 Firefox 中查看它們。

如您所見，第二個圓圈比第一個圓圈渲染得更好，因為0.5%漸變中的兩種顏色之間存在微小差異 ( )，而不是像第一個圓圈那樣使用整數值的直接硬色標。
再看一下，這次使用conic-gradient結果更明顯的地方：

在制作這些演示時，一個有趣的想法讓我印象深刻。與其一直修復失真，不如嘗試反其道而行之？我不知道會發(fā)生什么，但這是一個有趣的驚喜！我采用了圓錐漸變值并開始降低它們，使糟糕的抗鋸齒效果看起來更糟。

你看到最后一個有多糟糕嗎？這是一種在中間炒，沒有什么是順利的。讓我們用較小的值讓它全屏顯示：


我想你知道這是怎么回事。當我們對漸變中的硬色停止使用非常小的十進制值時，我們會得到一種奇怪的扭曲視覺效果。我們的噪音誕生了！
我們離我們想要的顆粒狀噪聲還很遠，因為我們仍然可以看到實際的錐形梯度。但是我們可以將這些值減小到非常非常小的值——比如0.0001%——突然之間就沒有梯度了，只有純粹的顆粒感：
我們有一個噪音效果，它只需要一個 CSS 漸變。
我們可以通過在調整其位置的同時使梯度的大小非常大來增加隨機性：
漸變應用于固定3000px正方形并放置在60% 60%坐標處。在這種情況下我們很難注意到它的中心。徑向漸變也可以這樣做：
為了讓事情變得更加隨機（并且更接近真實的噪聲效果），我們可以結合兩個梯度并使用background-blend-mode來平滑事情：
我們的噪音效果是完美的！即使我們仔細觀察每個示例，也沒有任何梯度的痕跡，而是美麗的顆粒狀靜態(tài)噪聲。我們剛剛將那個抗鋸齒錯誤變成了一個巧妙的功能！