純瀏覽器的 CSS 玻璃擬態產生器替代方案會驗證每一個輸入,將您的十六進位顏色與不透明度轉換為穩定的 rgba 色通道,並輸出一條帶有 WebKit 前綴相容寫法的單一 backdrop-filter 規則,讓您可以直接貼到樣式表裡。替代方案的重點並不是重新發明這個視覺效果,而是消除那些困擾複製貼上型產生器的隱性失敗:遮住背景的不透明填色、被瀏覽器悄悄拒絕的負值模糊、缺少廠商前綴而在一部分使用環境中失效,以及在純白背景上預覽導致模糊沒有東西可以濾鏡。
玻璃擬態看起來簡單到騙人:一塊半透明面板、一層柔和模糊、一條纖細的高光邊框。每一層都帶有會擊敗天真產生器的怪癖。填色必須是半透明的 rgba 值,因為實色背景會把 backdrop-filter 應該模糊的東西遮住。模糊本身必須是非負的像素長度,因為 filter 文法會拒絕負值。邊框不透明度與填色 alpha 分開計算,這樣一條纖細的淺色邊緣才能在不會壓平填色的情況下,把玻璃與複雜的背景區分開。這些都不是個人意見;每一條規則都是由 Filter Effects Level 1 以及瀏覽器實際實作該屬性的方式所定義。
為什麼大多數產生器的預覽都是錯的
第二類問題出現在預覽本身。許多產生器把面板渲染在純白背景上。面板後面沒有任何東西,瀏覽器就沒有東西可以取樣,於是開發者會得出「模糊沒作用」的結論,即使規則其實是正確的。一個CSS 玻璃擬態產生器替代方案必須重現真正的視覺契約:預覽在彩色背景上繪製面板,讓模糊看得見,然後把同樣的計算值寫進您複製的 CSS。當預覽是誠實的,您就不會再為了根本與模糊無關的問題,而一直調高模糊值。
手工拼湊的片段會以相反的方向遇到同樣的失敗。開發者寫下 backdrop-filter: blur(20px),把它放到一張幾乎不透明的卡片上,看不到效果,就以為這個屬性壞了。他們把模糊調到 40,然後 60,再加上 !important,結果都沒改變。這些步驟都不可能有效,因為障礙正是面板本身。一個把填色 alpha 與邊框 alpha 分開、並明確提醒您保持填色半透明的產生器,就能完全避免這樣的循環。
產生器控制什麼、輸出什麼
CSS 玻璃擬態產生器提供五個控制項:一個六位數十六進位顏色、一個半透明填色不透明度、一個背景模糊、一個白色邊框不透明度,以及一個圓角。每個輸入都有範圍且有限,並且各自被視為獨立屬性,讓您可以單獨調整填色、邊緣與幾何。工具會把十六進位值拆成紅、綠、藍三個通道,把百分比不透明度轉成穩定的 alpha,然後把結果寫成 background: rgba(R, G, B, A)。模糊會被序列化為像素長度。邊框不透明度分開保留,這樣即使填色幾乎全透明,一條淡淡的白色外框在複雜背景上也仍能讀得出來。圓角則原封不動作為標準 border-radius 長度傳遞。
輸出刻意做得簡窄。它只寫入一條半透明 rgba 背景、標準的 backdrop-filter: blur() 宣告、某些瀏覽器版本使用的 WebKit 前綴相容寫法,以及一條帶有自身 alpha 的一像素高光邊框與 border-radius。陰影、內距、定位與字體被刻意省略,讓它們可以來自您既有的設計標記,而不是被綁死在單一面板上。這些計算全部在瀏覽器內完成:數值不會被上傳、不需要帳號、也不會載入任何外部套件。
一步步建立一面玻璃面板
- 挑選一個六位數十六進位顏色與一個半透明填色不透明度。維持填色在 15–30% 左右,讓背景仍能透過玻璃被看見;完全不透明的填色會把面板後的東西全部遮住,讓整個效果失效。
- 把背景模糊調在大約 8 到 16 像素之間,然後另外設定白色邊框不透明度,讓一條纖細的高光邊緣壓在填色之上而不會壓平它。
- 選擇一個與介面其餘部分一致的圓角。大多數卡片使用 8 到 24 像素之間都合適;更大的圓角留給主視覺面板與互動對話框。
- 在內建彩色背景上檢視面板。如果模糊看起來不存在,小幅調高填色不透明度,或挑一個更鮮豔的背景顏色,再去動更大的模糊數值。
- 複製 CSS、貼到您的樣式表,並在真實的堆疊環境中測試,為不支援背景濾鏡的瀏覽器,或是在使用者關閉透明效果時,準備一個更不透明的相容寫法。
建議的起始範圍
| 屬性 | 起始約略值 | 調整時機…… |
|---|---|---|
| 背景模糊 | 8–16 px | 背景很雜亂或配色偏暗時 |
| 填色不透明度 | 15–30% | 文字對比在背景上失效時 |
| 邊框不透明度 | 30–60% | 面板在相近色調的背景上消失時 |
| 圓角 | 8–24 px | 卡片幾何或您的設計系統另有規定時 |
更大的模糊數值不一定是更好的效果。從上面的範圍開始,對照實際背景評估,再去把數值推向邊界。多數玻璃擬態的失敗,都來自跳過評估步驟,並且把所有滑桿一次推到最大。
已驗證的輸入與被拒絕的極端情況
驗證很重要,因為 filter 文法是嚴格的。負的模糊值、非數值的圓角,以及格式錯亂的顏色,都會產生沉默的瀏覽器失敗或可見的版面錯誤。產生器會拒絕超出範圍的輸入,而不是悄悄四捨五入,讓您複製到的 CSS 永遠是格式正確的。
| 控制項 | 輸入類型 | 產生器輸出的內容 |
|---|---|---|
| 十六進位顏色 | 六位數 #RRGGBB | 拆成 R、G、B 通道,用在 rgba 填色中 |
| 填色不透明度 | 0–100% | 轉為 0–1 的 alpha,作為背景值 |
| 背景模糊 | 非負像素值 | 序列化為像素長度;負值會被拒絕 |
| 邊框不透明度 | 0–100% | 套用在一條 1px 的白色邊緣上,與填色 alpha 分開 |
| 邊框圓角 | 非負像素值 | 原封不動作為標準半徑長度傳遞 |
| 背景預覽 | 內建彩色背景 | 與複製出的 CSS 採用的相同計算值 |
把填色 alpha、邊框 alpha 與模糊分開放在三個獨立控制項上,正是一塊讀起來像玻璃的面板,與一塊讀起來像有著模糊外框的染色方塊之間的差別。如果工具把兩種不透明度合併成一個滑桿,您就會失去在保持填色低調的同時仍提升邊緣的能力,也會失去測試面板在重花紋背景上看起來如何的機會。
在真實的堆疊環境中測試複製來的規則
您複製到的 CSS 建立在已知良好的預覽之上,但它仍必須能在您的實際版面中存活。backdrop-filter 屬性影響的是繪製在元素後面的像素,而不是元素自身的子元素,而 CSS 有一長串特性會建立限制瀏覽器可取樣內容的背景根源。根據 MDN backdrop-filter 參考文件,父元素的 opacity、filter、mask、裁切、混合,以及特定的 will-change 值,都可能各自封閉背景。一塊在獨立預覽中看起來完美的面板,一旦放進一張已經使用 filter 或 opacity 的卡片裡,可能就會塌成一塊平塗色塊。
正確的除錯順序是固定的。首先,確認面板本身是半透明的——完全不透明的面板無論 filter 值為何都會遮住背景。第二,沿著堆疊環境往上走,逐一檢查每個祖先元素上的背景根源。第三,只有在這兩項檢查都通過後,才考慮加大模糊,因為如果瀏覽器沒有東西可以濾鏡,把模糊數值調高並沒有用。在排除透明與背景根源之前就去抓更大的模糊值,是玻璃擬態工作中最常見的時間浪費之一。
相容寫法、效能與可及性
背景濾鏡並非無所不在、也並非總是便宜、更並非總是被想要的。為不支援背景濾鏡的瀏覽器、在輔助設定中關閉透明效果的使用者,以及成本過高的情境,提供一個實色或更不透明的背景相容寫法。把半透明的 CSS 視為強化效果,而不是基礎,並在 filter 無法使用時,讓相容寫法承擔主要工作。
效能是真實的考量。背景模糊在大面積、會移動或有巢狀結構的表面上可能很昂貴,成本會隨著被濾鏡區域以及後面內容的複雜度一起成長。讓被濾鏡的範圍保持有限,避免把模糊面板巢狀放在另一個模糊面板裡,並在具代表性的行動裝置硬體上量測,再把玻璃感很重的版面推上線。在小卡片上做有限範圍的模糊很便宜;在全頁滾動區上做無邊界的模糊,可能會讓中階裝置掉格。
可及性不是自動的。雜亂的影像仍會透過模糊滲出來,纖細的白色邊框也無法保證文字可讀。請在面板可能出現的每一種背景上驗證文字對比,為玻璃內任何可互動的元素提供清楚的焦點指示器,並在強制色彩模式與降低透明度的設定下測試設計。玻璃面板應該支援階層,而不是模糊它。
其餘部分交由您的設計系統補上
產生器刻意停在玻璃本身。陰影、內距、最大寬度與字體是周圍元件的屬性,而不是玻璃本身的屬性,所以它們屬於您的設計標記。從既有的高度階級套用 box-shadow,使用您其他卡片相同的內距,並重複使用已為該表面定義好的字體標記。把複製來的 CSS 視為一個在更大系統中經過妥善測試的屬性組合,而不是一個必須承擔所有視覺決定、自給自足的片段。正是這種分離,讓同一塊玻璃擬態區塊能在卡片、對話框、抽屜與提示框之間重複使用,而不會在每個地方都變成另一種視覺語言。
若想進一步了解,請參閱 CSS 載入動畫產生器替代方案,用於純 CSS 旋轉動畫。
若想進一步了解,請參閱 在線上使用 CSS 擬物風格產生器安全嗎?。