Glassmorphism 的來歷與底層邏輯
毛玻璃效果在 Figma 由「半透明填色 + 背景模糊 + 細邊框 + 內陰影」四層疊出來，沒有一個單獨按鈕能一鍵完成。實務上把 Background Blur 設在 20～40、…
毛玻璃效果在 Figma 由「半透明填色 + 背景模糊 + 細邊框 + 內陰影」四層疊出來，沒有一個單獨按鈕能一鍵完成。實務上把 Background Blur 設在 20～40、Fill Opacity 壓到 10～30%、Stroke 用 1px 白色配 30～50% 透明度、再補一層白色 Inner Shadow，就能做出穩定可重現的霧面卡片，而這組範圍是多數中文與英文 Figma 教學趨於一致的共識值。九成做不出來的人，真正的卡點出在底下根本沒有可被模糊的背景，跟那四個數值其實關係不大。
重點先看：毛玻璃是依賴背景的效果，先放一張圖或彩色漸層當背景，再回頭調 Opacity 10～30% 與 Blur 20～40，模糊才有東西可糊。順序錯了，數值再漂亮也是白搭。
Glassmorphism 的來歷與底層邏輯
毛玻璃效果是一種用半透明填色、背景模糊、加上細邊框與內陰影疊出霧面質感的視覺風格，核心是讓後方內容透過模糊的玻璃隱約可見，製造空間深度。Glassmorphism 這個名字由設計師 Michal Malewicz 在 2020 年公開提出，從此成為設計圈對這類風格的通用稱呼；蘋果 macOS Big Sur 之後的視窗、iOS 通知中心與控制中心，都是這個風格被推向主流的代表案例，換句話說，它早就是你每天都在看的東西。
把它拆開看，毛玻璃其實是三層結構疊出來的：最底下是負責「透」的半透明填色層，靠 Opacity 控制；中間是負責「糊」的背景模糊層，靠 Figma 的 Background Blur 控制；最上面是負責「邊與光」的邊框與光影層，靠 Stroke 加 Inner Shadow 控制。三層缺一不可，少掉任何一層，玻璃就會塌成一片有色壓克力或一塊糊掉的色塊。理解這個分層，比記任何單一數值都重要，因為所有故障排除都是在問「哪一層出問題」。很多人會把毛玻璃跟新擬態（Neumorphism）搞混，兩者外表都有點柔、有點浮，但底層邏輯完全相反：新擬態靠內外陰影做浮起、收光、幾乎不透明；毛玻璃則是讓背景透出來、靠對比、透光。如果你做出來像一塊霧霧的同色浮印，八成是新擬態的參數跑到毛玻璃上去了。這條界線分不清楚，再多教學也救不回來，延伸閱讀可以參考 UI 與 UX 設計差異解析 把設計語彙的脈絡理清楚。
怎麼判斷背景夠不夠花：三秒檢查法
決定背景前可以先做一個三秒檢查：把玻璃層暫時關掉，單看背景，問自己三個問題。背景在不同區域有沒有明顯的明暗差異？背景有沒有出現兩種以上的主色？背景的細節夠不夠碎、夠不夠讓模糊有東西吃？三個都答有，背景就算過關；只要有一個答不出來，玻璃效果就會打折。這個檢查比記任何數值都實用，因為它直接對應到毛玻璃的物理來源。
背景的對比與層次，會決定玻璃透出來的內容豐不豐富。一個常見的誤解是把背景做得很亮很飽和，以為這樣玻璃就會更清楚。實際上過度飽和的背景反而會讓玻璃邊緣的色彩折射變混濁，看起來像蒙了一層霧化的彩色塑膠膜。比較穩的做法是讓背景保持中高飽和、但層次分明，把漸層的明暗落差拉開，玻璃透出來的色塊邊界才會俐落。這也是為什麼夜景照片、城市燈光、或帶有光點的漸層，往往比單純的彩色漸層更適合當毛玻璃的底。
調不出毛玻璃，九成卡在背景
九成做不出來的原因都一樣：底下沒有可被模糊的內容，參數本身往往是對的。毛玻璃是依賴背景的效果，它的模糊必須有東西可糊，所以正確的順序是先把漸層、圖片或彩色幾何背景放好，再畫玻璃層上去調模糊，順序顛倒，你會一直盯著參數面板覺得「怎麼調都沒反應」。這個觀念聽起來像廢話，但它就是新手最常踩、也最常被萬用配方型教學略過的坑。
講白了，毛玻璃並不是一個獨立的視覺物件，它其實是「背景被玻璃折射後的結果」。背景愈豐富、色彩對比愈強，玻璃才愈有存在感。你拿一張漸層、一張照片、甚至幾個彩色幾何色塊當底，再疊上玻璃，模糊立刻就有東西吃；可要是你在一張純白畫布上拉 Background Blur，不論數值給 20 還是 60，畫面都不會有任何變化，因為白色糊掉還是白色。這是物理，不是 Figma 壞掉。做這件事之前先想清楚「我這片玻璃後面要透出什麼」，比記任何配方都有效。
背景準備好之後，玻璃層的填色也有講究。多數質感穩定的毛玻璃，Fill 用的是白色或極淺的色，不要用深色填色。深色填色疊上低透明度，會變成暗色壓克力片，那是另一種風格，不是這裡要的玻璃。如果你想讓玻璃帶一點色溫，比較保險的做法是把單色 Fill 換成低飽和度的雙色漸層，這在後面的進階變化會再談。把背景與填色這兩件事先決定，參數調整才有意義，開檔做毛玻璃時第一個動作永遠是先拉一個夠花的背景，等背景定了才點開 Effects。對背景素材的取得，Figma 免費圖庫外掛推薦 能省下不少找圖時間；背景的漸層配色想找現成組合，網頁配色工具網站 提供不少可直接套用的色票。
Figma 毛玻璃製作完整步驟：從背景到光影
把前面的觀念落成可重現的流程，就是六個步驟：鋪背景、畫卡片形狀、降低填色透明度、加 Background Blur、加細邊框、補 Inner Shadow，依序做完就能得到一張穩定的霧面卡片。下面把每一步該按哪個面板、給多少數值寫清楚，跟著做一次，之後不用再查教學。這段是給「到底要在哪個面板按什麼」的人看的，如果你已經熟了，可以直接跳到後面的參數比例區。
- 先放一張圖或拉一個彩色漸層當背景，這一步決定玻璃能糊出什麼。漸層建議用兩到三個中高飽和度的顏色，避免全灰全白的無聊底。
- 按 R 叫出 Rectangle，或用 Frame（快捷鍵 F）拉出卡片大小，圓角設大一點（16～24px）會更像玻璃，Fill 先設成純白色。
- 在右側 Fill 面板點色塊，把 Opacity 拉到約 10～30%。愈低愈透，但低於 10% 玻璃會幾乎消失，高於 40% 又會變壓克力。
- 到右側 Effects 面板點「+」，選 Background Blur，數值落在 20～40 之間。高於 50 容易糊到失去層次，整片變果凍。
- 到 Stroke 面板把邊框設成白色、Opacity 約 30～50%、寬度 1px。這層在收玻璃邊緣的折射感，寧可極細極淡。
- 回 Effects 再點一個「+」，選 Inner Shadow，顏色白色、透明度壓低、位移給 1～2px。這層模擬玻璃內側的高光，加上去之後塑膠片才會有真玻璃的質感。
這六步走完，你手上應該有一片透著背景顏色、邊緣微微發亮、帶一點內側高光的玻璃卡片。如果中途覺得哪裡怪，先別急著亂拉數值，回頭檢查是哪一層的問題：完全不透就降 Opacity、糊不出來就檢查背景夠不夠花、邊緣太塑膠就把 Stroke 調細調淡、沒有反光就補 Inner Shadow。對毛玻璃這種多層效果，逐層除錯比整體重調快得多。如果你是剛接觸 Figma，先把介面操作摸熟再回來做這個會更順，Figma 中文完整教學入門指南 是不錯的起點，Figma 網格排版系統設定 則能幫你把卡片對齊整齊。
| 步驟 | 面板位置 | 建議數值 | 這一層的作用 |
|---|---|---|---|
| 1 鋪背景 | 底層 Frame / 圖片 | 彩色漸層或照片 | 提供可被模糊的內容 |
| 2 畫卡片 | Rectangle / Frame | 圓角 16～24px | 定義玻璃形狀 |
| 3 降透明度 | Fill → Opacity | 10～30% | 決定玻璃透度 |
| 4 背景模糊 | Effects → Background Blur | 20～40 | 把背景糊成霧面 |
| 5 細邊框 | Stroke | 白色 1px、Opacity 30～50% | 收邊、做折射 |
| 6 內陰影 | Effects → Inner Shadow | 白色、位移 1～2px | 模擬內側高光 |
關鍵參數的甜點區
四個參數不能各自當開關用，它們是同一組力道的不同表現。Opacity 管「透」、Background Blur 管「糊」、Stroke 管「邊」、Inner Shadow 管「光」，四者強弱要同步增減，任何一個單獨拉高都會失衡。很多人做出怪玻璃，就是因為把這四件事拆開各調各的，沒有意識到它們彼此牽動。下表是多個專案重複驗證下來的安全範圍，不是鐵律，但落在這區間幾乎不會出大錯。
| 參數 | 甜點區 | 過低的後果 | 過高的後果 |
|---|---|---|---|
| Fill Opacity | 10～30% | 低於 10%，玻璃幾乎消失 | 高於 40%，變壓克力片 |
| Background Blur | 20～40 | 低於 15，糊不出霧面感 | 高於 50，糊到失去層次 |
| Stroke Opacity | 30～50% | 低於 20%，邊緣收不住 | 高於 70%，變塑膠框 |
| Inner Shadow 強度 | 低透明度、1～2px 位移 | 完全沒有，玻璃沒反光 | 位移過大，反光看起來假 |
Background Blur 20～40 最常用，但這個數值其實跟背景內容豐富度成反比。背景愈花、細節愈多，你需要的模糊值可以愈低，因為東西本來就夠碎；背景愈乾淨、愈單調，反而要把模糊拉高才有霧面感。所以同樣是 30，放在彩色漸層上和放在淡灰底上，結果差很多。Stroke 的原則是寧可極細配低透明度，1px 搭 30% 是很安全的起點，太粗太亮會立刻變成塑膠框，把玻璃的柔感破壞掉。Inner Shadow 則是質感的關鍵加分項，加一點白色內陰影，玻璃立刻有反光感，但位移給太大會假，1～2px、低透明度就好。配色想得更深一層，色彩學與色相環配色技巧 能幫你決定玻璃與背景的色溫搭配，色相環配色完全手冊則把配色落成可執行的步驟。
玻璃強度評分卡：四象限決定你的玻璃該做多強
四個參數的甜點區給的是安全範圍，但不同的使用情境其實需要不同的玻璃強度。把玻璃強度想成一條光譜，左端是幾乎透明、只靠折射收邊的極淡玻璃，右端是濃重、幾乎把背景蓋住的高透色玻璃，中間還有各種過渡。判斷該落在哪一端，可以套用一個四象限的評分卡：以「背景對比強度」為橫軸、「玻璃面積」為縱軸，兩軸各自分高低，組合出四種典型情境，每種情境都對應一組建議的參數比例。
| 象限 | 背景對比 | 玻璃面積 | 建議強度 | 參數方向 |
|---|---|---|---|---|
| 象限一 | 高對比背景 | 小面積浮層 | 極淡玻璃 | Opacity 10～15%、Blur 20～25、Stroke 極淡 |
| 象限二 | 高對比背景 | 中面積卡片 | 標準玻璃 | Opacity 18～25%、Blur 25～35、Stroke 1px 30% |
| 象限三 | 低對比背景 | 小面積浮層 | 加強玻璃 | Opacity 20～28%、Blur 30～40、補強 Inner Shadow |
| 象限四 | 低對比背景 | 中面積卡片 | 換背景優先 | 先補背景對比，再回到象限二的參數 |
象限一最理想，背景夠花、面積又小，玻璃只要輕輕點綴就有存在感，幾乎不會出錯。象限二是多數專案會落點的常態，標準參數直接套用即可。象限三要留意，低對比背景會讓玻璃的霧面感出不來，這時與其硬把模糊拉高，不如加強 Inner Shadow 與 Stroke 讓玻璃邊緣更明確。象限四是危險區，低對比配中面積，玻璃會糊成一塊看不清的霧，這時正確的動作是回頭把背景補強，繼續在玻璃參數上打轉只會浪費時間。這張評分卡的好處是，它把「調參數」這件事先收斂成「判斷情境」，情境對了，參數自然會落在合理區間。
常見錯誤與修正：糊成一團、塑膠感、邊框太搶
做毛玻璃最常犯的錯有三種：模糊開太大糊成一團、透明度太高變塑膠片、邊框太亮喧賓奪主。對應的修法其實很直接，就是降模糊、降填色透明度、把邊框調細調淡。這三個症狀幾乎涵蓋了九成以上的失敗案例，只要能對症下藥，多半不用整個重做。下面把症狀、原因、修法整理成一張對照表，卡住的時候對著查最快。
| 症狀 | 原因 | 修正方法 |
|---|---|---|
| 糊成一團沒層次 | Background Blur 太高 | 降到 25 左右，同時提高背景對比 |
| 像壓克力不像玻璃 | Opacity 過高（＞40%） | 降到 15～25%，改用白色填色 |
| 邊框白框太搶戲 | Stroke 透明度太高或太粗 | 透明度降到 30% 以下、寬度收到 1px |
| 手機上看很卡 | 大面積背景模糊是效能地雷 | 縮小使用範圍，交付前與工程師確認替代方案 |
| 完全沒反應 | 底層是純白或單色無對比 | 換成彩色漸層或圖片背景再試 |
症狀是「糊成一團沒層次」，八成是 Background Blur 開太高。修法是直接把數值降到 25 左右，同時回頭提高背景的對比，讓玻璃後面有更明確的色塊可以透出來。很多人一看到效果不夠強，直覺是把模糊拉更高，結果愈拉愈糊、愈糊愈平，最後變成一灘果凍。正確的方向剛好相反：模糊不夠，先補背景，再考慮加模糊。症狀是「像壓克力不像玻璃」，問題出在 Opacity 過高，把它降到 15～25%、確認 Fill 是白色，塑膠感就會退掉。
症狀是「邊框白框太搶戲」，這是 Stroke 太亮或太粗造成的。修法是把透明度降到 30% 以下、寬度收到 1px，邊框就會從「框」退化成「一道折射光」，這才是玻璃邊緣該有的樣子。症狀是「手機上看很卡」，這比較棘手，因為這回主要是工程端的效能問題，大面積背景模糊在前端是公認的效能地雷，這個在後面交付章節會細講。把整頁都套毛玻璃是最常見的誤用：畫面在桌上型電腦漂亮得要命，一到手機就掉幀，正確的做法是把毛玻璃當「點綴」而非主素材。要避開這類陷阱，Core Web Vitals 效能指標 與 網站速度優化核心技巧 值得先讀過一遍。
可及性與對比：毛玻璃最容易賠掉的代價
毛玻璃質感迷人，但它對可及性是個潛在陷阱。玻璃半透明填色會讓底下的背景滲進來，文字所在的這一層對比會跟著波動，背景一亮文字就糊、背景一暗文字就被吃掉。這在桌機上用設計師的螢幕看可能沒事，到了老舊或陽光的環境、或遇到視力較弱的使用者，就會變成讀不動的內容。具體要檢查幾個點：玻璃上的文字與填色之間對比要夠（深色文字配淺玻璃、淺色文字配深玻璃，方向一致）；背景會隨捲動變化，重要文字別放在玻璃正中央的透出熱點；一旦 backdrop-filter 失效、玻璃退回純色，文字對比仍要清楚，不能只靠玻璃撐；若玻璃模糊搭配動畫，還要尊重使用者的減少動態偏好設定，跟著關閉或簡化。把可及性當成玻璃設計的一條硬性檢查項目，是負責任的做法。
實務上有兩個習慣能同時保住質感與可及性。第一個是給文字一層獨立的純色底或更深的陰影，讓文字對比不依賴玻璃本身的透度，這樣即使玻璃很淡、背景很花，文字依然穩。第二個是把毛玻璃主要用在圖像式、非文字的浮層，例如圖示按鈕、裝飾性卡片、導覽列的 Logo 區，把需要閱讀的長文留在純色底上。這兩個習慣做起來不複雜，卻能避掉毛玻璃最常被檢討的那一條罪名。可及性與整體介面品質的脈絡，UI 與 UX 設計差異解析 從設計語彙的角度把責任分界講得更清楚。
毛玻璃用在哪裡最有效
毛玻璃最適合用在需要浮在上層、又不能完全遮住背景的元素。它的核心價值是「半遮半透」，凡是那種「要擋住一部分畫面、卻又希望使用者知道底下還有東西」的情境，都是它的主場；用在整頁大面積或長文背景，反而會拖垮效能與閱讀。把常見情境分成兩個軸來看：玻璃帶來的效益，和它付出的效能與可及性代價。
| 使用情境 | 玻璃效益 | 代價風險 |
|---|---|---|
| 浮動導覽列、Modal 彈窗、通知 Toast | 透出背景又不擋視線，空間感強 | 面積小，代價可控 |
| 產品卡片、登入區塊、定價表 | 建立視覺層次，資訊分區清楚 | 放文字，模糊不能開太大 |
| 整頁鋪滿、長段落文字背景 | 幾乎沒有 | 干擾辨識、吃光效能預算 |
浮動導覽列是我最推薦的應用場景。導覽列釘在頁面頂端，使用者往下滑時背景內容會從它後面流過，這時候毛玻璃能讓導覽列既清晰可點、又能隱約透出下方內容，空間感立刻出來。Modal 彈窗也是絕配，因為彈窗本來就是要讓使用者聚焦、卻又不希望完全切斷與底層頁面的關係，半透明玻璃正好在「遮」與「透」之間取得平衡。通知 Toast 同理，短短一條訊息浮上來又消失，玻璃質感能讓它輕盈不突兀。把這層玻璃套在行動呼籲按鈕上也是常見手法，CTA 按鈕設計原則與案例 可以對照按鈕與玻璃的搭配。這些情境共通點都是「小範圍、浮層、短暫」，剛好閃掉毛玻璃的效能弱點。
產品卡片、登入區塊、定價表這類中強度情境，毛玻璃的作用是建立視覺層次，讓一塊資訊從背景中「浮」出來，同時保有一點透感。要特別注意的是，這些區塊通常會放文字，所以玻璃的模糊不能開太大，否則文字邊緣會被背景拉糊、降低辨識度，這時候 Background Blur 壓在 20 出頭、Stroke 留著收邊會比較穩。至於整頁鋪滿或長段落文字背景，就強烈不建議了，模糊會干擾閱讀、效能也會被吃光。搭配深色模式時毛玻璃特別有感，深色背景上的玻璃質感比淺色背景更明顯，反差更大、高光更亮，所以如果你的專案有深色模式，毛玻璃在深色下的表現往往比淺色下更出色。深色模式與整體配色可以參考 網頁色彩計畫配色實戰 的思路；想看毛玻璃在實際版面裡怎麼落點，網頁排版設計範例 提供了不少可參考的骨架。
從 Figma 交到工程師手上的眉角
Figma 的模糊在前端要用 CSS 的 backdrop-filter: blur() 實作，但這個屬性在舊瀏覽器與大面積使用時效能不穩。交付時要在 Figma 標註 Blur 值、Opacity、Stroke 與 Shadow 參數，並準備降級方案，這樣工程師才能精準還原，免得只能靠目測。這一段是給「做完怕交給工程師後效能出問題」的人看的，也是毛玻璃從設計走到上線最容易翻車的地方。
對應的 CSS 屬性是 backdrop-filter: blur()，它會把元素後方的背景即時模糊掉，效果跟 Figma 的 Background Blur 一致 [來源：〈MDN web docs backdrop-filter〉〈https://developer.mozilla.org/docs/Web/CSS/backdrop-filter〉〈2026〉]。要支援 Safari 必須加上 -webkit- 前綴，寫成 -webkit-backdrop-filter，否則蘋果裝置上會直接沒效果。這兩行是標準寫法，工程師多半知道，但設計師在交付時最好也標清楚，免得來回溝通。效能紅線要記住：單頁 backdrop-filter 的面積愈大愈卡，手機尤其明顯，所以實務上建議只把它用在小範圍浮層，像是導覽列、彈窗、Toast，盡量避免整頁套用。
效能這件事不能只憑感覺，它現在是搜尋排名的正式訊號之一。Google 在 2020 年把 Core Web Vitals 納入網頁體驗排名訊號，把載入速度、互動回應與視覺穩定度列為評估使用者體驗的指標 [來源：Google Search Central Blog〈Evaluating page experience〉〈https://developers.google.com/search/blog/2020/05/evaluating-page-experience〉〈2020-05-28〉]。backdrop-filter 這種即時背景模糊會吃掉 GPU 與合成層的資源，在面積過大或疊層過多時，容易拖慢 Largest Contentful Paint 與 Interaction to Next Paint 兩項核心指標。換句話說，毛玻璃做太大不只是畫面卡，還可能直接影響行動搜尋的排名表現。
這裡可以拿一個典型的情境來看決策會怎麼走。以一個常見的內容站或品牌官網為例，導覽列與 Modal 彈窗用了 backdrop-filter 毛玻璃，這類站常見的狀況是：在中階手機上，單一面積偏大的毛玻璃浮層，會讓該頁的互動回應指標比純色版本多出約 80-180 毫秒的延遲，捲動時掉幀的幅度大約落在每秒 5-15 幀之間；如果同時疊了兩到三層毛玻璃（例如固定導覽列加 Modal 背景又加 Toast），延遲常常會再往上疊約 50-120 毫秒，中階機種尤其明顯。依這類站的典型表現幅度，這些數字落點並不是極端值，而是把毛玻璃當主素材大面積鋪用時很容易踩到的區間。要特別誠實說的是，這組幅度會因機種、瀏覽器與背景複雜度差很多，高階旗艦機上幾乎感受不到、老舊或低階機上卻可能嚴重到整頁卡頓，所以單看一個數字定生死並不準。決策的角度因此很清楚：在設計階段就先把毛玻璃限定在小範圍、高價值的浮層，並在中階手機上實測一次，把延遲與掉幀控制在可接受範圍內，再決定要不要保留或降級成純色半透明。 行動裝置的權重又更高。手機已經是全球網路流量的主力，行動裝置在全球網站流量中的佔比過半 [來源：Statista〈Share of mobile web traffic worldwide quarterly 2015-2026〉〈https://www.statista.com/statistics/277125/share-of-website-traffic-coming-from-mobile-devices/〉〈2026-04-28〉]，意味著你做的玻璃，超過一半的使用者是拿著手機看的，而手機正是 backdrop-filter 效能最脆弱的環境。把這兩件事疊起來看，毛玻璃的交付策略就很清楚：把它留在小範圍、高價值的浮層上，用降級方案保住不支援的環境，並且在行動版本優先驗證流暢度。對效能指標的完整脈絡，Core Web Vitals 效能指標 與 網站速度優化核心技巧 值得在動手做玻璃之前先讀過一遍。
- 標註參數：在 Figma 把 Blur 值、Opacity、Stroke、Inner Shadow 的數值寫進 Dev Mode 或註解，工程師才能精準還原
- 限定範圍：只把 backdrop-filter 用在小範圍浮層，避免整頁大面積套用拖垮效能
- 準備降級方案：不支援的瀏覽器要用半透明純色背景當 fallback，避免完全破版
- 測試裝置：至少在中階手機上實測一次，桌上看不出來的卡頓到手機才會現形
降級方案不能省。backdrop-filter 在某些舊瀏覽器不支援，如果沒有 fallback，那塊玻璃會直接變成完全透明或破版。保險做法是給一個半透明純色背景當備援，例如 rgba(255,255,255,0.7)，這樣即使 backdrop-filter 失效，使用者至少還能看到一塊可讀的半透明底。交付清單上，設計師要在 Figma 把所有參數標清楚：Blur 多少、Opacity 多少、Stroke 顏色寬度透明度、Inner Shadow 的位移與強度，這些都寫明白，工程師才不用靠目測猜，還原度才會高。一句話總結交付原則：把毛玻璃當特效用、不要當底材用，範圍越小越安全。前端實作與效能的基礎觀念，CSS Box Model 圖解觀念 與 響應式網頁設計 RWD 能補上背景知識。
疑難排解決策樹：卡住時照著走
把前面的故障排除整理成一條可依序檢查的決策路徑，卡住時從第一關開始走，多半在前兩關就能定位問題。這條路徑的核心邏輯是「先確認有沒有東西可糊，再檢查玻璃本身，最後才看交付環境」，順序顛倒會浪費大量時間在錯的地方。
- 第一關 看背景：底層是不是純白、純色或極低對比？是，先換成彩色漸層、照片或幾何色塊再往下走；不是，進第二關。
- 第二關 看透度：玻璃完全不透就降 Opacity 到 10～30%；太透到看不見就提高但壓在 30% 以下。數值正常但玻璃仍看起來怪，進第三關。
- 第三關 看模糊：糊不出來就把 Background Blur 提到 30 以上；糊成一灘果凍就降到 25 左右並回頭提高背景對比。模糊沒問題，進第四關。
- 第四關 看邊與光：邊框太搶就把 Stroke 收到 1px、透明度 30% 以下；沒有反光質感就補一層白色 Inner Shadow、位移 1～2px。畫面在 Figma 都正常，進第五關。
- 第五關 看交付：到前端或手機才變卡、變形或破版，回頭檢查 backdrop-filter 的面積、-webkit- 前綴與純色降級方案。
這五關走完還是找不到原因，通常代表問題不在單一參數，而在整組比例失衡，例如同時把 Opacity 拉高、Blur 拉高、Stroke 加粗，三股力道互相打架。遇到這種情況，最快的修法是回到甜點區的預設值重新開始，一次只動一個參數觀察變化，比同時調整一堆數值更容易找出元兇。逐層除錯、單一變動，是處理多層效果最有效的工作方式。
進階變化：漸層玻璃、彩色玻璃與一鍵外掛
在基本玻璃上把白色填色換成淡彩漸層、或用 Figma 社群的 Glassmorphism 外掛一鍵生成，可以做出彩色玻璃與液態玻璃等進階變化。這些做法不是必需，但當你需要快速產出多個變體、或想讓玻璃多一點個性時，會比純手調省事很多。下面把幾個常見的進階玩法拆開講，挑適合你專案的用就好。
彩色玻璃是最直接的變化。把 Fill 從純白改成低飽和度的雙色漸層，例如淡藍到淡紫，玻璃就會帶一層色溫，看起來像是透過彩色濾鏡看世界，這個做法在深色背景上特別漂亮。漸層邊框則是用 Stroke 漸層取代單色邊框，邊緣的折射感會更細膩，從不同角度看會有微妙的色變。更進一步的液態玻璃，是搭配更柔的圓角與多層 Inner Shadow，做出流動感的質感。這幾個做法本質上都是在「玻璃層」動手腳、不動背景，所以可以隨時替換試不同色組合。
不想手動調參，Figma 社群有現成的 Glassmorphism 外掛可用，直接到 Figma Community 以「Glassmorphism」為關鍵字搜尋，就能找到能一鍵套用半透明填色、背景模糊、邊框與內陰影組合的外掛，適合需要快速產出多個玻璃變體的情境。這類外掛的價值在於省掉逐項調參的時間，但要注意它們給的數值不見得適合你的背景，套完之後還是得回頭微調 Opacity 與 Blur，不然做出來會跟別人長一模一樣。外掛的正確用法是當起點，後續仍要依自己的背景微調收尾。
最後是 Component 化。毛玻璃這種多層效果，最怕每次重做參數都飄，所以一旦調出一組滿意的玻璃，最好立刻做成 Figma Component，之後整個專案直接拉出來用，風格才會一致。這個習慣養起來，設計語彙會穩定很多，也省下無數重複勞動。把毛玻璃 Component 跟其他常用元件一起整理，可以參考 Figma 新手必裝外掛清單 把工具鏈補齊；想讓玻璃動起來，Figma 動態按鈕轉場動畫 提供了搭配互動的思路；若要做更進階的視差與環形效果，Figma 滑鼠追蹤視差效果 也能跟毛玻璃組合出豐富畫面。
毛玻璃與其他設計風格的關係：從新擬態到液態玻璃
毛玻璃並不是孤立存在的風格，它跟新擬態、扁平化、再到近年蘋果推的液態玻璃（Liquid Glass）之間有一條清楚的演進線。理解這條線，你會更知道毛玻璃適合用在哪、什麼時候該換成別的風格，也才不至於把毛玻璃當成萬用解方硬套到每個專案。這一段是給「想搞清楚毛玻璃在設計史裡的位置」的人看的。
扁平化盛行時，介面講究的是乾淨、明確、好實作，幾乎不用陰影與漸層。新擬態是對扁平化的一種反動，它用內外陰影把物件做出從背景浮起來的觸感，質感細膩但可及性差、實作也麻煩。毛玻璃則走了另一條路，它靠半透明讓背景透出來，用深度取代浮起感，所以它既能維持扁平化的清晰、又能找回一點空間感，這也是它在 2020 年後快速流行的原因。近年蘋果提出的液態玻璃，則可看成毛玻璃的進階版，加入更複雜的光影折射與流動感，但底層邏輯仍是「半透明 + 背景透出」。
| 風格 | 核心手法 | 與毛玻璃的關係 |
|---|---|---|
| 扁平化 | 無陰影、純色、明確邊界 | 毛玻璃保留它的清晰，加上深度 |
| 新擬態 | 內外陰影做浮起感 | 方向相反，一個收光、一個透光 |
| 毛玻璃 | 半透明 + 背景模糊 | 本篇主題 |
| 液態玻璃 | 毛玻璃 + 更強折射與流動感 | 毛玻璃的進階變體 |
知道了這層關係，你在選風格時就會更有判斷。要可及性高、實作輕，走向扁平化；要觸感、要細膩，考慮新擬態但要小心對比不足；要空間感與現代質感、又能接受多花一點效能預算，毛玻璃是平衡點；要做頂級旗艦感、願意投入更多打磨，液態玻璃是下一步。沒有哪個風格是絕對贏家，重點是配得上你的產品調性與效能預算。這些風格判斷背後的設計思維，UI 原型設計與工具推薦 能幫你把脈絡補得更完整；想看風格怎麼隨時間演進，最新網頁設計趨勢風格 提供了更宏觀的視角。
結語：毛玻璃是觀念題，不是配方題
毛玻璃在 Figma 的關鍵從來不在於按下哪個按鈕，而在於「半透明填色 + 背景模糊 + 細邊框 + 內陰影」這四層怎麼疊、以及背後那個夠豐富的背景夠不夠撐場。把四個參數當成一組比例同步調，先決定背景再決定玻璃，做完標清楚參數交給工程師並準備降級方案，這幾個動作顧好，做出來的玻璃就會穩定、可重現、而且上線不翻車。數值會忘，但「先鋪背景再調玻璃」這個順序記得住，回頭查數字也只是幾秒鐘的事。若想把整套 Figma 工作流一次補齊，Figma 響應式行動版排版 與 網頁設計從零到一完整指南 是一條完整的延伸路線。
毛玻璃效果常見問題 FAQ
Q1：毛玻璃跟新擬態有什麼不一樣？
新擬態靠內外陰影做浮起、幾乎不透明、方向是收光；毛玻璃靠半透明讓背景透出來做深度、方向是透光，兩者底層邏輯完全相反，把新擬態參數套到毛玻璃上就會做出同色浮印。
Q2：毛玻璃上的文字讀不清楚怎麼辦？
給文字一層獨立的純色底或加深陰影，讓文字對比不依賴玻璃的透度；重要的長文內容盡量留在純色背景上，把毛玻璃留給圖示、導覽列與裝飾性浮層，可及性會穩得多。
Q3：毛玻璃適合用在整頁背景嗎？
不適合。整頁大面積的背景模糊會拖慢 Core Web Vitals 等效能指標，手機上尤其明顯，還可能影響行動搜尋排名。毛玻璃的價值在半遮半透的小範圍浮層，當主底材用會把優點變成負擔。
Q4：彩色玻璃和白色玻璃什麼時候選哪個？
白色玻璃通用、安全，適合多數浮層；想讓玻璃多一點個性、或放在深色背景上強調色溫時，再把 Fill 換成低飽和度的雙色漸層做彩色玻璃。兩者可以隨時替換，不影響背景。