霧面玻璃 CSS：backdrop-filter 公式
霧面玻璃 CSS，結合了半透明的 rgba 背景、一個 backdrop-filter: blur(...) 數值、一條一像素的高光邊框，以及一個 border-radius，來產生玻璃擬態（glassmorphism）設計中那種通透的面板效果。這四個部分沒有一個是可有可無的。一個完全不透明的面板，會遮住背後的內容。一個有 blur 屬性、但背後沒有任何透明度的面板，什麼效果都看不到。一個沒有邊框的面板，則會失去在視覺上把它與所在表面區隔開來的邊界。這個效果是一整組協同運作的數值，而不是單一個 CSS 屬性，這也是為什麼手寫的宣告，第一次套到真實頁面上時，常常看起來不太對勁。
一個標準、可直接用於正式環境的霧面面板規則，大致長這樣：
background: rgba(255, 255, 255, 0.25); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 16px;
每一行都回答了一個不同的問題。rgba 的 alpha 值，讓面板背後的像素能夠透出來。blur 則把這些像素柔化。加上 WebKit 前綴的重複宣告，是為了涵蓋尚未支援標準屬性的舊版瀏覽器。邊框則給面板一道細微的亮邊，避免它融進雜亂的背景裡；圓角半徑則讓角落變圓。只要這些數值中有任何一個出錯，整個視覺效果就會崩潰，而其中最常見的失敗情況，就是模糊效果看起來完全沒有作用。
為什麼模糊在純色背景上看起來像是隱形的
要讓一個霧面玻璃 CSS 面板正確呈現，必須同時滿足三個條件。第一，面板本身至少要有部分透明；一個完全不透明的背景，會把背後的一切都遮住，模糊效果也就沒有任何東西可以柔化。第二，面板背後必須要有可見的像素，讓瀏覽器能拿去做濾鏡運算；一個純白或單一顏色的頁面，沒有任何細節可供濾鏡運算，因此卷積運算的結果，會與輸入完全一樣。第三，這個元素不能位於某個會阻擋所取樣背景的 backdrop root 之內。父層元素如果使用了自己的 opacity、filter、mask、clip-path、mix-blend-mode，或某些 will-change 數值，就可能在那個邊界上終止 backdrop 的取樣鏈，並讓可見結果凍結不變，這正是 W3C Filter Effects Level 1規範要精確定義 backdrop root 的技術原因。
這正是開發者最常認定 backdrop-filter 在他們的專案裡「壞掉了」的原因。這個屬性其實運作正常；問題出在它背後的元素要不是不可見、就是沒有細節，或不在取樣範圍之內。MDN 的 backdrop-filter 參考文件列出了會觸發新 root 的屬性組合，讓工程師可以稽核父層鏈，而不必憑猜測行事。基於這些原因，測試一條霧面玻璃 CSS 宣告最合適的地方，是在真實的父層階層結構裡，配上真實的背景——無論那是一張主視覺圖片、一個 CSS 漸層，還是一個影片元素。如果效果在那裡沒有反應，先檢查透明度，再檢查 backdrop root，只有在那之後，才考慮調高模糊值。
用視覺化產生器調整霧面面板
因為有四個數值必須同步變動，做出一個能正常運作的霧面效果，最快的方法，是使用一個受控制的視覺化工具，讓你能移動每一個輸入值、看到組合後的效果，並複製預覽畫面實際使用的確切 CSS。CSS 玻璃擬態產生器（CSS Glassmorphism Generator）就是在本機做這件事：每一個預覽中的屬性，都與複製出來的規則會產生的屬性完全相同，因此你看到的就是實際會出貨的樣子。以下步驟會帶你走過四個輸入階段。
- 選擇玻璃顏色與半透明填色的不透明度。挑選一個符合周圍設計系統的基礎十六進位色值，接著把填色不透明度設定在大約 15 到 30 個百分點之間。這個產生器會把百分比轉換成穩定的 alpha 值，並把十六進位色值拆解成紅、綠、藍三個色版，因此最終的 rgba 值是計算出來的，不是憑感覺猜出來的。
- 調整背景模糊、高光邊框不透明度，以及圓角半徑。模糊值可以先從大約 8 到 16 像素開始，邊框不透明度大約在 0.3 到 0.5 之間，圓角半徑則依頁面的視覺語言而定。模糊數值越大，不代表效果越好；真正勝出的數值，是能讓面板在目標背景上讀起來像是單一表面的那個數值。
- 在內建的彩色背景上檢視面板效果。這個預覽會把面板放在一個彩色背景上，這樣模糊、alpha 與邊框，都是針對真實取樣的像素來評估的。在純白或純黑表面上判斷玻璃效果，會得到錯誤的結果，因為瀏覽器根本沒有東西可以濾鏡處理。
- 複製 CSS，並在真實的堆疊情境中測試它。把這條規則貼進專案裡，接著對照實際的背景圖片、漸層或內容驗證。如果模糊效果消失了，先檢查透明度與 backdrop-root 邊界，不要在沒有證據的情況下直接調高模糊數值。
一個實務上的細節：這個產生器會驗證輸入值。依照濾鏡語法，負的模糊值是無效的，因此這個工具會直接拒絕它，而不是悄悄把它四捨五入。四個輸入值中，任何一個出現非有限數字，同樣會被拒絕。顏色必須是一個六位數的十六進位數值。這代表每一條複製出來的規則，都是語法上有效的宣告區塊，而不是一種在某個瀏覽器上可能能編譯、在另一個瀏覽器上卻會失敗的近似寫法。
輸出結果中每一條宣告分別控制什麼
複製出來的 CSS 包含四組屬性。下表整理了每一組的功能、有效數值的形狀，以及會讓它失效的常見失敗模式。
| 宣告 | 控制什麼 | 有效數值的形狀 | 常見失敗情況 |
|---|---|---|---|
| background: rgba(r, g, b, a) | 面板的半透明程度 | 色版 0 到 255；alpha 0 到 1 | alpha 為 1 會遮住背景，讓模糊效果變得毫無用處 |
| backdrop-filter: blur(Npx) | 柔化繪製在面板背後的像素 | 非負的長度值 | 負值無效；純色背景不會產生任何可見結果 |
| -webkit-backdrop-filter: blur(Npx) | 涵蓋基於 WebKit 的瀏覽器版本 | 與標準屬性相同 | 較舊的 WebKit 版本若缺少此前綴，會呈現不出任何效果 |
| border: 1px solid rgba(255, 255, 255, b) | 把面板與表面區隔開來的亮邊 | 1 像素；b 是邊框不透明度 | 邊框淡到看不見，或完全沒有邊框，導致面板與背景融為一體 |
| border-radius: Npx | 轉角圓潤度 | 非負的長度值 | 半徑過大可能裁掉內容；半徑為零則會失去玻璃質感 |
從不透明度換算成 alpha 值的過程很直接，值得看一次。色值 #60a5fa 是由紅 96、綠 165、藍 250 組成。搭配 25 個百分點的填色不透明度，得到的背景宣告就是 rgba(96, 165, 250, 0.25)。同樣的十六進位值在 40 個百分點的不透明度下，會變成 rgba(96, 165, 250, 0.40)。這個換算只是一次除法：25 除以 100 是 0.25；40 除以 100 是 0.40。一旦這個心智模型清楚了，設計系統中的每一個霧面面板，都可以用一個固定的十六進位值加上一個百分比來描述，rgba 則交由程式碼或這個產生器計算出來。
請注意，複製出來的 CSS 刻意省略了陰影、內距、定位與字體排印。這些屬於周圍元件系統的一部分。如果讓產生器也加上這些，會把單一個面板與一整套視覺語言混為一談，並迫使每一個使用這條規則的人，都得覆寫他們不想要的數值。請把這條規則當成一個建構元件，而不是一張完成品卡片。
退回方案、瀏覽器支援，以及降低透明度的需求
背景濾鏡並非到處都可用，即使在支援的地方，使用者也可以選擇退出。標準做法是提供一個較不透明或完全實色的背景作為退回方案，這樣即使濾鏡缺失、被停用，或運算成本過高，面板仍然能被讀成一個表面。一種簡單的做法，是用逗號分隔的背景宣告：background: rgb(255, 255, 255); background: rgba(255, 255, 255, 0.25);。能理解 rgba 的瀏覽器，會使用第二個值；較舊或受限的環境，則會維持實色，使用者依然能看到一個清楚的表面。
無障礙，是霧面面板另一個容易悄悄失敗的地方。prefers-reduced-transparency 與 prefers-reduced-motion 媒體查詢，讓使用者可以要求較不裝飾性的體驗，而 forced-colors 模式則會把顏色改寫成系統色值。一個效果依賴半透明度的玻璃面板，應該在這些情境下提供一個實色的替代方案，而面板內的任何文字，都必須針對使用者可能遇到的所有背景，測試其對比度是否足夠。一道淡淡的邊框，並不保證足夠的區隔效果，而雜亂的圖像，即使在濾鏡強度拉滿的情況下，透過模糊仍然依稀可見。避免把大段內文直接放在不可預期的圖像上方。針對面板內任何互動內容，使用內距、合理的最大寬度，以及清楚的焦點指示器。透明度是用來建立層次的工具，而不是層次本身的替代品。
效能與作用範圍
背景模糊有真實的算圖成本。瀏覽器必須讀取元素背後的像素、執行卷積運算，並在背景每次變化的每一格畫面中重新合成結果。這在一張靜態圖片上的小面板來說成本很低，但在一段會動的影片上鋪滿全螢幕的面板，或一長串巢狀的濾鏡圖層上，成本就會很高。由此得出兩條實務規則。第一，讓套用濾鏡的區域保持有限。一張放在主視覺圖片上、寬度 320 像素的卡片，與一個鋪滿整個滿版背景、寬度 100 個百分點的面板，成本結構完全不同。第二，在具代表性的行動裝置硬體上實測。在配備獨立 GPU 的桌上型電腦上看起來毫不費力的模糊效果，可能會在中階手機上掉幀，因此當效能是優先考量時，應該先降低模糊值，而不是先降低周圍設計的視覺品質。
這個產生器中的所有數值，都是在瀏覽器中計算出來的，不需要帳號，也不會載入任何外部套件。前面提到的CSS 玻璃擬態產生器：免上傳的替代方案這篇文章，說明了另一種完全在用戶端維持相同屬性組合的更廣泛工作流程，當專案有嚴格的「不上傳」政策時，這篇文章會很有用。底層的濾鏡行為，包括 backdrop root 是如何形成的，記載在前面連結過的 W3C Filter Effects Level 1 規範中。
想更深入了解，請參閱把線性漸層從 Figma 帶進 CSS。