視覺樣式詞條 3-33

毛玻璃Frosted Glass

也常叫做：毛玻璃、磨砂玻璃、Glass Effect

你可能會這樣說

看過那種半透明磨砂的卡片或列，背後的東西隱約透光，想在自己的網站做出這種質感，但套了之後只是單純的半透明。

毛玻璃的重點不是透明，是模糊：半透明底色加上背景模糊（backdrop blur），後面的東西會霧霧地透出來，像磨砂玻璃。少了模糊那一步，就只是一般的半透明塑膠片。

標準配方：白色底 10% 到 20% 透明度、模糊 12 到 20px、1px 淺色半透明邊框。那條細邊框很關鍵，它模擬玻璃的厚度，少了就假。

它天生適合疊在豐富的背景上：照片、漸層、地圖。背後是一片純白的話，毛玻璃等於「沒東西可透」，只會覺得灰灰的。

毛玻璃卡片

模糊強度玻璃底色

靈魂是背景模糊（backdrop-filter）：把模糊拉到 0，就只剩一張半透明塑膠片。

圖 3-33　拖動模糊強度——毛玻璃與半透明塑膠片的一線之隔。

中文就可以

請做一張毛玻璃卡片疊在首屏照片上：
白色 12% 透明度底、背景模糊 16px、1px 白色 30% 邊框、圓角 16px。
卡片內文字用白色，加極淡的投影避免糊進背景。
背景照片本身要有明暗變化，毛玻璃才有東西可透。
給我開啟與關閉模糊的對照圖，確認差異明顯。