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

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

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

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

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


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