Figma Glassmorphism：毛玻璃效果的使用時機與限制

為什麼那個在 Figma 裡美到不行的毛玻璃效果，一到網站上就糊成一片、還把手機載入分數拖到紅字？整個畫面像起霧的玻璃，卡片半透明地浮在彩色背景上，字還清晰可讀，看起來高級得不得了。這個效果叫 Glassmorphism（毛玻璃、霧面玻璃），從 Apple 的介面一路燒到每一份網頁設計趨勢清單。客戶愛、設計師愛，可它也是我看過最常被「做一半」的效果。

我想把毛玻璃這件事從頭講清楚，但不只說明「在 Figma 裡怎麼做」。設計師會看到質感怎麼做、前端會理解霧面效果到了網站如何實作，業主也能判斷什麼時候適合使用。說穿了，Glassmorphism 的難處不在「做不出來」，而在「做得出來、卻上不了線」。

三分鐘核心重點：Glassmorphism 是「半透明加背景模糊加細邊框加陰影」的四件組合，在 Figma 裡用 Background Blur 疊出來，到了網站要用 CSS 的 backdrop-filter 即時運算；它背景相依、效能吃重、對比不穩，所以是香料、不是主菜。記住這段，下面整篇都是在展開它。

毛玻璃效果到底是什麼，先講清楚

Glassmorphism 不是單一個 CSS 屬性，也不是 Figma 裡某一個按鈕。它是一組視覺條件的組合，缺一個就「不像」。我把這組條件拆成四個，你照著檢查就不會走鐘：

1. 半透明：玻璃本身要有透光性，背後的顏色要能透上來，不是一塊實心色塊。
2. 背景模糊：透上來的東西要被打散、霧化，不能讓人直接穿透看清楚底下的內容。這個「霧」是整個效果的靈魂。
3. 細邊框與內光：玻璃邊緣要有一條極細的亮邊，模擬光打在玻璃表面的反射。少了它，玻璃就只是一塊髒汙。
4. 層次與陰影：玻璃要浮在背景之上，要有影子撐住那個「浮」的感覺。

四個條件裡，最常被新手漏掉的是第三個。很多人把背景模糊開下去就收工，結果畫面看起來像螢幕沾到水氣，離一塊精緻的玻璃差得遠。差別就在那條 1 px 的亮邊。

另一個我得先講的概念是：Glassmorphism 是背景相依的效果。意思是，同一個玻璃卡片，放在彩色漸層上很美，放在純白背景上幾乎看不到。這是它最容易被誤用的地方。很多人把玻璃元件做好、存成元件庫，結果搬到不同頁面就垮掉，因為背後沒有夠豐富的顏色讓它「透」。換句話說，毛玻璃其實是一種跟背景強耦合的視覺關係，很難當成獨立的卡片設計到處搬。這個觀念會貫穿整篇文章，因為它同時解釋了「為什麼在 Figma 裡漂亮」和「為什麼到了網站會壞」。

從體驗設計的角度看，毛玻璃之所以討喜，是因為它同時傳達了兩個訊號：一是「這一層在上面」，二是「下面還有東西」。這兩個訊號組合起來，就是所謂的層次感，也是現代介面設計很常拿它來做浮層、卡片、彈窗的原因。想更完整理解這類視覺線索怎麼影響使用者的感受，可以延伸讀UI/UX 設計的完整解析，把單一效果放回整體體驗的脈絡裡看，你會更知道什麼時候該收、什麼時候該放。

在 Figma 裡做出毛玻璃，我建議的底層順序

多數人做毛玻璃的習慣是：開一個 Frame，點 Effects，加 Background Blur，結束。這條路能動，但質感會差一截。我自己的順序是倒過來的，從背景往上長，因為玻璃的長相完全取決於背後透上來什麼。順序錯了，你會一直在「改玻璃」，但問題其實在背景。

我建議的堆疊順序，由下到上是這樣：

1. 先把背景弄好：放一張層次豐富的圖、一個多色漸層，或幾個色塊。背景越有變化，玻璃越好看。如果你還在找素材，Figma 的免費圖庫外掛可以快速塞一張夠花的底圖進來。
2. 畫一個矩形當玻璃本體：填色（Fill）選實心色，通常是白色或淺色，透明度降到 10% 到 25% 之間。關鍵是這個 Fill，不是 blur。透明度太高會變實心，太低會看不見邊界。
3. 加 Background Blur：在 Effects 裡加一層 Background Blur，這才是真正的「霧」。注意是 Background Blur，不是 Layer Blur。兩者差很多，後面會講。
4. 加細邊框（Stroke）：Inside 模式，1 px，白色，透明度大約 30% 到 50%。這是那條關鍵的內光邊。
5. 加 Drop Shadow：軟一點、大面積、低透明度的影子，讓玻璃浮起來。通常 y 軸 4 到 12、blur 20 到 40、透明度 10% 到 20%。
6. 最後才放內容：文字、按鈕、圖示。內容也要自己顧對比，因為玻璃下的背景會變動。圖示來源可以先看13 個 Figma 圖示外掛的比較，選定單一風格家族再放進玻璃卡片。

這個順序的好處是，你隨時可以把背景換掉重新看，玻璃會自動跟著新背景「重新霧一次」。如果你的玻璃是硬刻死、跟背景沒有耦合，換背景的瞬間就破功。

起點參數：第一次試就照這組數字

很多人問我：「那數值到底開多少？」老實說沒有萬用數字，因為它依背景而定。但我給你一組起點，第一次試就照這組開，再依你的背景微調。這組不是真理，是讓你不用從零摸索：

屬性	建議起點	調整方向
Fill（實心色）	白色 / 透明度 15%	背景越花，透明度可以越低；背景越淡，要拉高才看得見
Background Blur	20 到 30	想夢幻一點往上加，但要小心文字邊緣跟著糊
Stroke（細邊框）	Inside / 1 px / 白色 40%	亮背景可改深色邊；永遠保持極細
Drop Shadow	y 8 / blur 30 / 透明度 15%	玻璃疊很多層時要往下壓，免得全部黏在一起

這組數字我自己用了很多次，九成的情境微調一下就能用。剩下的一成，通常是背景太極端（全黑或全白），那種情況我會建議你直接換背景，別在玻璃本身硬調，因為毛玻璃本來就不適合單調底。

Background Blur 跟 Layer Blur 到底差在哪

我在步驟裡特別提醒要用 Background Blur，不要用 Layer Blur。這兩個名字只差一個字，行為卻完全相反，搞混是新手最常見的坑，也最容易讓你做出「四不像」的玻璃。

Layer Blur 模糊的是「這個圖層本身的內容」。你開了它，這個矩形連同它裡面的填色全部一起被糊掉，等於你把玻璃連同上面的灰塵一起抹花。這在毛玻璃的情境裡是錯的，因為你要的是玻璃後面的東西霧掉，玻璃這一層本身要維持乾淨。

Background Blur 模糊的是「這個圖層背後的其他圖層」。它會穿透這個半透明矩形，去把它底下的內容打霧，再讓霧化後的結果透上來。這才是毛玻璃真正要做的事。用個比喻：Layer Blur 像對著一片沾了灰的玻璃哈氣，連字都跟著看不清；Background Blur 像把一片乾淨玻璃放在起霧的風景前，風景朦朧，玻璃上你寫的字依然銳利。

還有一個實務上的差別：Layer Blur 是即時渲染這個圖層自己，背景一動不影響它；Background Blur 是即時取樣背後的內容，所以當你滾動背景、或把玻璃拖到不同位置，霧化的結果會跟著變。這也是為什麼前面我一直強調毛玻璃是「背景相依」的，從這一個屬性的選擇就能看得一目了然。如果你做完之後發現移動玻璃，霧都不動，八成就是開錯成 Layer Blur 了。

玻璃本身要選什麼顏色

很多人預設玻璃就是白色半透明，其實那是偷懶的選擇。玻璃的填色是可以、也應該帶色彩的，而這個色彩會決定整個畫面的情緒跟高級感。

白底的玻璃感覺乾淨、現代、偏科技，適合工具型產品、後台介面、極簡風格的網站。但白玻璃放在暖色調背景上會有點突兀，像一塊補丁硬貼上去。這時候把玻璃微調成跟背景同色系的淺色（例如背景是橘色漸層，玻璃就用很淺的暖橘)，整個畫面會立刻和諧起來，玻璃像是從背景裡長出來的一部分，完全不像外來的異物。

深色玻璃則是另一條路，適合深色主題、攝影集、走高級感的品牌。深色玻璃會把背景壓暗，文字通常要配淺色，但對比的穩定性反而比白玻璃好一點，因為深色玻璃本身就先拉開了跟亮背景的距離。這幾個選擇沒有絕對的對錯，關鍵是玻璃的色相要跟你的整體配色計畫一致，別無腦選白就了事。如果你還沒有一套清楚的配色計畫，先把網站的色彩計畫定下來，再回頭選玻璃的色，才不會做到一半發現顏色打架。想快速試出玻璃色跟背景色的搭配，配色工具是很好用的加速器。

內建功能、外掛、社群元件，三條路怎麼選

做出毛玻璃的方法在 Figma 裡主要有三條路，各有各的痛點。我先講結論：新手用內建、趕時間用社群元件、量產用外掛。這張表是我自己實際用過之後的比較：

方法	優點	代價	適合誰
內建 Effects 手動堆	完全可控、不依賴第三方、學完受用一輩子	第一次摸索較慢，多個元件要重複做	想真的搞懂的人、長期維護的設計系統
Glassmorphism Generator 類外掛	一鍵產生、參數可調、量產快	品質參差，有些會塞不需要的圖層，交接給前端要看清楚	要做一大批卡片、時間緊的專案
Figma Community 現成元件	質感通常不錯、免費、直接拖進來	別人調好的參數不見得適合你的背景，要會改	快速提案、Demo、找靈感

如果你想完整把 Figma 學起來，不只毛玻璃，我會推薦先看過Figma 的完整入門教學，把基礎打穩再來玩這種進階效果，才不會連圖層順序都搞不清楚就在調 blur。

什麼時候才值得裝外掛

我對外掛的態度一向是：能內建就內建。原因很實際，外掛會更新、會下架、會換老闆，你今天依賴的產生器，半年後可能連 Figma 新版都跑不動。但有一種情況我會裝：你在一個大型專案裡，要產生十幾二十個毛玻璃卡片，而且每個都要參數一致。這時手動做太慢、又容易不一致，外掛的價值就出現了。

不過裝歸裝，我還是會要求團隊：外掛產生的圖層，進到正式檔案前要清一遍，把多餘的圖層、命名、效果都檢查過。因為前端拿到檔案時，不會知道某個 effect 是外掛亂加的還是你刻意的，他只會照單全收。如果你還在摸索 Figma 的外掛生態，新手必裝外掛清單是一個不錯的起點。

從 Figma 到網站，那層霧面其實不是圖片

這一節是整篇文章我最想講的，也是多數教學完全沒提的部分。毛玻璃效果從 Figma 到真實網站之間，有一個巨大的認知落差，這個落差就是為什麼那麼多設計稿「做得出來、上不了線」。

落差是這樣的：在 Figma 裡，毛玻璃就是一張半透明、開了 Background Blur 的矩形，它會即時去模糊背後的圖層。可是當你要把這個畫面交給前端、變成真正的網頁時，問題來了。很多設計師的直覺是「把這張卡片匯出成 PNG 圖片」，然後讓前端把圖片放上去。聽起來合理，卻是災難的開始。

因為一旦你把它變成一張平面的圖片，那層「霧」就被烤死在圖裡了。它模糊的是 Figma 裡那個特定的背景，不是使用者真實看到的背景。結果就是：網頁上換了內容、滾動了畫面、換了裝置，那塊玻璃底下的霧完全不動，看起來就像一塊貼上去的貼紙，完全失去毛玻璃「跟著背景呼吸」的生命力。更糟的是圖片還很大張，效能直接吃虧。

真正應該發生的事是：前端不要用圖片，而是用 CSS 在瀏覽器裡即時重新創造這個效果。而那個關鍵屬性，是 CSS 的 backdrop-filter。它做的事情跟 Figma 的 Background Blur 是同一件事：對元素背後的內容做模糊。這是一個可以查證的公開規範，完整定義收在 MDN web docs 的 backdrop-filter 條目（2026）。

講到這裡你應該明白了：毛玻璃不是一張設計資產，而是一組 CSS 指令。設計師該負的責任，是交出一組清楚的參數，讓前端能用 backdrop-filter、半透明背景色、細邊框、陰影重新組合出來。一張漂亮的圖只是起點，能被工程師還原成可運作的程式碼，才算真的做完。如果你的設計交付流程裡沒有這一步，毛玻璃就永遠停在 Figma。

Figma 屬性對照到 CSS

為了讓這個交接真的發生，我整理一張對照表。設計師把這張表填一填交給前端，前端的眼睛會亮起來：

Figma 設定	對應的 CSS	備註
Fill 白色 15%	background: rgba(255,255,255,0.15)	半透明背景，不是 blur 本身
Background Blur 25	backdrop-filter: blur(25px)	真正的霧；記得加廠商前綴與 fallback
Stroke 1px 白 40%	border: 1px solid rgba(255,255,255,0.4)	那條關鍵的內光邊
Drop Shadow y8/blur30/15%	box-shadow: 0 8px 30px rgba(0,0,0,0.15)	讓玻璃浮起來

如果你對網頁的盒子模型還不熟，像 padding、margin、border 怎麼互相影響，強烈建議先讀過CSS Box Model 的完整圖解，因為毛玻璃卡片的邊框、內距、陰影會疊在一起，搞懂盒子模型你才調得動。

這裡再多給一個前端的友情提醒。backdrop-filter 在不同瀏覽器之間的支援程度不一，舊版 Safari 要加上 -webkit-backdrop-filter 前綴才會動，少數環境則完全不支援。負責任的寫法是搭配 @supports 做偵測：支援就給毛玻璃，不支援就退化成實心半透明背景。這個 fallback 不是可有可無的裝飾，是讓你的設計在不支援的環境裡還能被正常使用。設計師如果在交付時就先標明「不支援時要退化成什麼樣子」，前端的工程師會非常感激你這份體貼。

手機上的毛玻璃，是效能地雷

到這裡都是好消息：質感好、交接順。但毛玻璃有一個大家都裝作沒看到的代價，就是效能。而這個代價，在手機上會被放大到非常痛。

先看一個事實：根據 Statista 的統計（2026 年 4 月），全球網頁流量已經有超過六成來自行動裝置，而且這個比例還在上升。也就是說，你設計的毛玻璃畫面，大多數人是在手機上看的，不是在你那台記憶體插好插滿的設計筆電上看的。

backdrop-filter 為什麼耗效能？因為它要求瀏覽器在每一幀都去取樣元素背後的像素、做模糊運算、再疊回去。這不是一次性的工作，是持續的運算。滾動的時候、動畫的時候、背景變動的時候，瀏覽器都要重算。一個畫面上如果有三五個毛玻璃卡片同時存在，中低階手機就會開始掉幀、發熱、甚至讓整頁的互動反應變遲鈍。

這件事不是我在嚇你。Google 早就把頁面體驗列為排名會參考的訊號之一，2020 年 5 月的 官方部落格文章〈Evaluating page experience〉就談過這件事。所以毛玻璃拖慢效能，不只是使用者體驗變差，還可能直接動到你的搜尋表現。如果你想知道這些效能指標到底怎麼算、怎麼顧，Core Web Vitals 的完整攻略會講得很細，其中 INP（互動延遲）這一項特別容易被毛玻璃這種即時運算的效果拖累。

我把毛玻璃在效能上的殺傷力整理一下，讓你有感：

情境	效能衝擊	我的建議
單一、靜態的毛玻璃卡片	低，通常無感	放手用
多層毛玻璃卡片同時出現	中到高，中低階手機會卡	限制在兩層以內
毛玻璃加上滾動視差	高，每幀重算兩次	擇一就好，別疊
毛玻璃上還跑動畫	非常高，保證掉幀	動畫交給另一層，玻璃保持靜止

我自己在評估一個頁面要不要上毛玻璃時，有一個很樸素的問題會先問：「這個效果，在中階 Android 手機上滾動，會不會卡？」如果會，我就退一步，改用更輕的視覺手法。關於怎麼把手機版的整體體驗顧好，Figma 的響應式設計跟RWD 響應式網頁設計的觀念會幫上忙，因為很多效能問題其實是「桌機思維直接搬到手機」造成的。

如果你還是想用毛玻璃又不想犧牲效能，有兩個工程手法可以學起來。第一個是漸進增強：用 CSS 的 @supports 去偵測瀏覽器支不支援 backdrop-filter，不支援的就退化成實心半透明背景，畫面少一點霧，但至少不會壞。第二個是尊重使用者的減少動態偏好：用 prefers-reduced-motion 媒體查詢，當使用者系統設定要降低動態時，就把毛玻璃換成更安靜的呈現。這兩個手法是現代前端的常識，但在毛玻璃這種吃重效果上特別重要。

桌面跟手機，玻璃要分開做嗎

很多人設計毛玻璃只在桌機上做一版，然後假設它在手機上會一樣好看、一樣順。實際上，手機上的毛玻璃幾乎一定要分開考慮。原因有兩個：一是手機效能負擔大，前面已經講過；二是手機螢幕小，玻璃面積如果跟桌機用一樣的比例，視覺上會顯得太擠、太花，質感反而變廉價。

我自己在響應式設計裡的習慣是：桌機版可以放手用兩層以內的毛玻璃，手機版則盡量只保留一個最重要的玻璃元素（通常是那個真的需要浮起來的卡片或 Modal），其他全部退化成實心半透明。這樣既保住了桌機的質感，又不讓手機使用者付出效能代價。把這個「桌機玻璃、手機收斂」的版本差異，明確標在你的設計稿裡，前端才知道兩個斷點要做不同的事。這件事在Figma 響應式設計的脈絡下尤其關鍵，因為響應式從來不是把桌機版等比例縮小，是為每個尺寸重新做一次判斷。

可及性：毛玻璃底下的，字會「浮動」

效能是看得見的代價，但毛玻璃還有一個看不見的代價，叫可及性。這一塊很多人完全沒意識到，但它才是讓我對毛玻璃保持警覺的真正原因。

問題是這樣的：毛玻璃下的背景是動態的、半透明的，這代表你的文字對比度不是固定的。背景滑過深色區，字看起來清楚;背景滑過淺色區，字瞬間消失。這對一般使用者只是小困擾，對視力較弱的使用者、對強光下看手機的人、對年長使用者，可能是完全讀不出來。WCAG 的對比度標準是在固定背景下訂的，毛玻璃這種「會動的背景」會讓對比度在一個範圍裡飄移，測起來很麻煩。

我的實務守則有幾條，很簡單但很有效：

• 毛玻璃上的字，盡量不要依賴玻璃本身的對比。給文字一個夠深的顏色，或乾脆給文字一個半透明的深色底中框，雙保險。
• 別把重要資訊放在毛玻璃上。價格、按鈕、錯誤訊息這種絕對不能看不清的東西，用實心容器裝。
• 測的時候要把背景推到最壞情況。把背景圖換成全白、全黑、高對比的花紋，都看一次字還清不清楚。
• 手機上的字要再大一級。桌面上的精緻小字到了毛玻璃上，常常就是悲劇的開始。

如果你做的毛玻璃卡片是要包一個行動召喚按鈕（CTA），那更要小心，因為按鈕是整個頁面最不能出錯的元素。怎麼設計一個在各種背景上都站得住腳的按鈕，CTA 按鈕設計有完整的討論，搭配毛玻璃一起看會很有收穫。

對比度要怎麼測才靠譜

毛玻璃的對比度之所以難測，是因為它是浮動的、不是一個固定值。我自己的做法是取三個極端時刻來量：背景滑到最亮處、背景滑到最暗處、背景剛好跟文字同色調處。只要這三個時刻的文字對比都還過 WCAG AA 的門檻（正常文字 4.5:1、大字 3:1），我就放行;只要有其中一個不過，我就退回去調文字色，或乾脆在文字底下加一層半透明的深色襯底，用雙保險把對比鎖住。

Figma 裡現在有不少對比度檢查的外掛，但它們量的多半是「當下這一刻」的對比。毛玻璃的問題恰恰是這一刻不能代表全部，所以工具給的單一數字只能當參考，你還是要手動把背景推到三個極端各看一次。這個手續花不到幾分鐘，卻能幫你擋掉那種上線之後才被使用者回報、卻已經很難回頭改的可讀性災難。

毛玻璃最常被搞砸的四種方式

看了上面這些，你大概已經發現毛玻璃的雷區不少。我把自己實際看過、最常出現的四種搞砸方式列出來，你拿去對照一下自己手上的稿，中箭的機率其實不低：

1. 背景太乾淨：玻璃放在純色或單調的背景上，既沒東西透上來，也沒東西可霧。結果就是一塊灰灰的半透明色塊，看不出任何質感，反而像版面沒做好。解法永遠是同一個：先把背景弄豐富，再來談玻璃。
2. 整頁都是玻璃：導覽列玻璃、卡片玻璃、彈窗也玻璃，全部疊在一起。視覺層次全糊成一團，效能也跟著炸。記得前面那句心法：它是香料，一兩次就夠。
3. 字直接放在玻璃上不做額外處理：設計師在 Figma 裡挑了一個剛好可讀的字色，但 Figma 的背景是固定的，真實網頁的背景是動的。一上線，字在某些時刻直接消失。這個最危險，因為設計師自己完全看不出來，只有真實使用者會踩到。
4. 把玻璃匯出成圖片交差：前面講過了，這等於把毛玻璃的靈魂（即時呼應背景）直接閹掉，還順便送上更大的檔案跟效能負擔。這是設計與工程交接時最經典、也最常見的悲劇。

這四種裡，前三種是設計端的問題，第四種是交接端的問題。把它們記下來，每次做毛玻璃都跑一次自我檢查，你會比八成只管「看起來酷」的設計師穩得多。

什麼時候用、什麼時候不要，一張決策表

講了這麼多，你應該已經感覺到我對毛玻璃的態度不是「要不要用」，而是「在哪裡用才對」。它是一個強勢的視覺手法，強勢的意思是用對了是亮點，用錯了是噪音。下面這張決策表，是我自己接專案時心裡跑的清單：

場合	用不用	理由
登入頁、產品 Hero 區的單一重點卡片	用	視覺焦點集中，效能可控，質感加成明顯
覆蓋整個彈出視窗（Modal）的背景	用	毛玻璃能同時模糊並暗示背後內容，比純黑遮罩更有層次
導覽列（Navbar）固定在頂部	看情況	滾動時持續運算，中低階手機會卡;要測過再上
整頁多層卡片全用毛玻璃	不要	層次全部糊在一起，效能崩盤，質感反而變廉價
文字密集的內容區（文章、表格）	不要	可讀性會被犧牲，毛玻璃是給視覺用的，不是給閱讀用的
需要嚴格對比的重要訊息（報價、警告）	不要	背景會變動，對比不穩定，風險太高

表裡有一格我特別想多講幾句：彈出視窗（Modal）。Modal 是毛玻璃最經典、也最合理的應用之一，因為它本來就需要遮住背後的內容、又想暗示背後還有東西在，毛玻璃剛好同時解決這兩件事。比起一塊死黑的半透明遮罩，毛玻璃的 Modal 保留了空間感，使用者知道「我還在原本的頁面裡，只是上面浮了一層要處理的東西」。不過即便是這個最合理的用法，還是要注意 Modal 的玻璃別疊太多層、別又加上動畫，否則在開開關關之間就會是一場掉幀之旅。

一個更簡單的心法：把毛玻璃當成一個頁面只用一兩次的香料就好，當主菜會膩。香料撒對地方，整道菜升級;香料倒整鍋，就只是辣到吃不下。這個心法跟整體的配色觀念其實是通的，如果你想把自己的色彩判斷力練起來，色彩學完整指南跟網站配色的實戰觀念是很紮實的打底，因為毛玻璃的透明色、邊框色、陰影色，全都是配色功夫的延伸。懂得取捨，比懂得做效果更值錢。

跟其他 Figma 技巧串起來用

毛玻璃很少單獨存在，它通常是整個視覺語言的一部分。我把它跟幾個常見的搭配講一下，讓你知道怎麼把它放進更大的設計脈絡。

第一個搭配是網格系統。毛玻璃卡片再漂亮，擺放亂掉就全毀。我會先把Figma 的網格系統拉好，把玻璃卡片錨在格線上，這樣不管畫面多花，視覺骨架還是穩的。很多人以為毛玻璃看起來亂是因為模糊，其實是因為卡片沒對齊。

順帶一提，毛玻璃因為自帶陰影和模糊的外溢，卡片之間的留白要比一般實心卡片更大，不然影子會疊到隔壁卡片上，看起來黏成一坨。我自己在排毛玻璃版面時，間距通常會比一般版面多留四分之一到三分之一。這種「玻璃需要呼吸空間」的排版手感，可以參考一些成熟的網頁排版範例去體會，看別人怎麼在高質感的視覺裡騰出留白，因為真正的質感往往來自留白，跟塞滿剛好相反。

第二個搭配是動態。毛玻璃加一點點動態會非常有質感，例如滑鼠移過去時玻璃微微浮起、邊框變亮。但記得前面講的，動態跟毛玻璃疊在一起效能會爆，所以動態要做在 transform 或 opacity 上，不要動到 backdrop-filter 本身。如果你對按鈕的微互動有興趣，Figma 動態按鈕設計是一條很好的進階路;想要更大氣的沉浸感，則可以看Figma 視差效果，但請切記：視差跟毛玻璃能不疊就不疊，兩個都是吃效能大戶。想替頁面加上載入動畫的人，可以看流動 Loading 原型的做法，讓等待時間也有設計感，但同樣別讓它跟毛玻璃疊在同一個畫面上。

第三個搭配是原型。毛玻璃這種講究即時反應的效果，光看靜態圖不準，一定要做成可互動的原型，在實際的滾動、滑鼠移動下看，才看得出問題。怎麼把毛玻璃放進一個會動、可點的原型裡，UI 原型設計的流程觀念會幫你少走很多冤枉路。

把視野再拉大一點，毛玻璃在整體網頁設計趨勢裡的位置，它目前仍掛在多數榜單上，但已經不是那種「每個網站都要來一下」的全民運動了，而是變成一個成熟的、要會用的工具。網頁設計趨勢跟網頁設計完整指南能幫你把毛玻璃放回它該有的位置：一個手法、一個工具，夠了。

三個可以馬上做的檢查

讀到這裡，你不缺觀念了，缺的是動手。我給你三個現在就能做的檢查，把我們講的東西落實到你自己手上：

1. 打開你最近一個用了毛玻璃的稿，檢查它有沒有那條 1 px 的細邊框。沒有的話，加上去，你會看到質感瞬間升級。
2. 把那個毛玻璃畫面交給前端之前，先用這篇的屬性對照表，把每個 Figma 設定翻成 CSS 參數寫在旁邊。這一步會逼你確認自己交得出能上線的東西，而不只是一張漂亮的圖。
3. 拿手機實機滾一次。如果你做的網站已經上線，找一台不是旗艦的手機，實際滾動有毛玻璃的頁面，感受一下順不順。會卡的話，參考效能那一節的退法，把它降一階。

這三個檢查有一個共同特色：都不需要新工具、不需要新技能，只需要你換一個角度，重新看自己已經做好的東西。設計的進步，很多時候關鍵在於檢查舊的效果，新效果反而是次要的事。毛玻璃尤其如此，因為它太容易讓人在 Figma 裡自我感覺良好，你得不時跳出設計師的視角，用前端工程師的眼睛、用使用者的眼睛、用一台中階手機的眼睛，把它再看一次。

毛玻璃是一個讓人又愛又怕的效果。愛的是它真的能把質感撐起來，怕的是它真的會把效能與可讀性壓下去。差別只在於你用不用心把這四件事都顧到：背景、參數、交接、代價。顧到了，它就是你工具箱裡最體面的那一把;顧不到，它就只是另一個看來高級、實際上拖累網站的裝飾。

設計這件事，從來不是把效果做出來就結束，而是把效果做出來、又能讓它在真實世界裡好好活著。願你的毛玻璃，美得有道理，也快得有底氣。

如果你正在評估網站改版，卡在「哪些視覺效果該留、哪些該砍」這種取捨上，這類得在美感跟效能之間來回權衡的判斷，正是我們 Whoops 平時幫客戶做的事。講這句話無意在推銷。當你發現自己的網站一直在漂亮跟快之間拉扯、不知道該怎麼取捨時，找個懂設計也懂 SEO 的夥伴聊聊，會少走很多冤枉路。把這篇的方法先用在自己的稿上，真的遇到判斷不了的情境，再考慮找人也還不遲。