Figma 毛玻璃效果教學：Glassmorphism 霧面質感設計完整指南

Figma 毛玻璃效果（Glassmorphism）的質感來自四個參數的搭配組合：背景模糊（Background Blur）落在 8 到 20px、填色透明度壓在 15 到 25%、1px 極細半透明描邊、加上一淺一深兩層投影。關鍵在於讓卡片「透出背景但細節仍清晰」：背景被穿透後保留可辨識的色塊流動，這正是它和一般半透明色塊最大的差別。把模糊值開大只會讓背景糊成一團色塊，並不會讓玻璃質感變好。這個設計風格由設計師 Michal Malewicz 於 2020 年正式命名[來源：〈Glassmorphism in user interfaces〉〈https://uxdesign.cc/glassmorphism-in-user-interfaces-1f39bb1308c9〉〈2020〉]，蘋果 macOS 與微軟 Fluent Design System 都長期採用半透明模糊面板。

重點先看：毛玻璃八成的「糊又髒」來自選錯模糊類型：Background Blur 模糊背景、Layer Blur 連文字一起糊，兩者混用就是質感崩壞的根因。

毛玻璃效果的定義與組成要素

毛玻璃效果（Glassmorphism）是一種讓圖層半透明地覆蓋在背景之上、卻仍能透出背景輪廓的視覺風格。在 Figma 裡它由四個要素共同撐起：低透明度的填色、背景模糊、極細邊框、多層投影。少任何一個，成品都會從「玻璃」退化成「一塊有顏色的半透明色板」。

這套風格不是憑空冒出來的。「Glassmorphism」這個名字由設計師 Michal Malewicz 於 2020 年在 UX Collective 上正式提出[來源：UX Collective 原文]，他把它定義為四件套：半透明、模糊、細邊框、柔和投影。同年蘋果在 macOS Big Sur 全面導入半透明模糊面板，微軟 Fluent Design System 也早就把 Acrylic 材質當成招牌，兩家大廠把這個語彙推到了主流介面的視野裡。其實半透明模糊的源頭可以追溯到更早的 Windows Vista Aero 玻璃視框，以及 iOS 7 之後控制中心那種半透明面板，只是那時候還沒有一個統一的名稱去涵蓋這整個視覺家族。

和單純把透明度調低的半透明色塊比起來，毛玻璃多了一個關鍵差異：透但不平。背景被模糊之後仍保留色塊的流動感，讓卡片「浮」在內容之上，產生明確的前後空間層次。這也是為什麼很多新手照著把透明度往下拉、卻怎麼做都像一塊灰灰的塑膠片，缺了那層讓背景穿透的模糊。判斷成品是否合格的快速方法是：遮住背景再看一次卡片，如果卡片本身變成一片毫無細節的純色，那就只是一塊半透明色板；只有當背景的色塊流向能隱約穿透、卡片邊緣又有反光，它才成立為玻璃。

四個要素之間是互相補位的關係，單獨調強任何一個都會破壞平衡。把透明度壓得太低，卡片會失去穿透感變成不透明色板；把模糊開到極大，背景會糊成一片失去細節；省略描邊，邊緣會扁掉沒有玻璃的厚度感；只給一層投影，卡片會像貼在背景上而不是浮著。理解這個互相制約的關係，比記住任何一組具體數值都重要，因為不同的背景、不同的裝置，最終平衡點會落在不同的數字上。毛玻璃也屬於會吃 GPU 效能的視覺效果，在大量重複使用或低階裝置上渲染負擔會浮上來，這點到實戰階段會再細講。如果你想學的是 Figma 中文完整教學 裡那種有質感的介面卡片，毛玻璃幾乎是繞不過去的一站。

毛玻璃欺騙眼睛的三個視覺原理

毛玻璃能騙過眼睛、讓人立刻判讀成「一塊玻璃浮在某個東西之上」，靠的是景深暗示、邊緣反光、接觸陰影這三個視覺感知原理的組合。理解它們，就能解釋為什麼有些參數組合看起來像玻璃、有些卻像塑膠片，也才知道該往哪個方向微調。

最核心的是景深暗示。大腦習慣把「清晰」和「靠近」連在一起、把「模糊」和「遠處」連在一起，當卡片本身維持銳利、背景卻被柔化，視覺系統會自動判讀成卡片位於背景前方，這就是空間層次的來源。這也說明了為什麼選到 Layer Blur 會毀掉效果：它把卡片自己糊掉，景深暗示整個反過來，玻璃變成一片失焦的色霧。在這個基礎上，邊緣反光負責建立實體感，真實世界的玻璃邊緣會因為光線折射而產生一道細細的高光，1px 白色半透明描邊模擬的就是這道反光；少了它，卡片會像一塊浮動的色塊而非有厚度的物件。描邊之所以用半透明而不用純白，是為了讓反光強度跟著背景明暗自動調節，在亮背景上不會過曝、在暗背景上又不會消失。最後是接觸陰影：物體浮在表面上時，距離越近的陰影越深越銳利、距離越遠的陰影越淺越擴散，兩層投影同時給出「近」和「遠」兩個層次的暗示，讓大腦重建出卡片離背景的距離感。只給一層陰影會讓這個距離暗示變得單薄，卡片看起來像是貼在背景上而不是浮著。色彩與光影的更多觀念可以對照 色彩學對比與互補色配色 與 色彩心理學與用戶心理，把填色、描邊、陰影三者的明暗關係想清楚。

視覺要素	模擬的物理現象	大腦的判讀	省略後的後果
Background Blur	光線穿過磨砂玻璃的散射	背景在後方、卡片在前方	失去前後空間層次
半透明填色	玻璃本身的色調染光	這是一塊有顏色的材質	變成完全不透明色板
1px 白色描邊	玻璃邊緣的折射高光	這個物件有厚度與實體	卡片邊緣扁掉、無實體感
兩層投影	近距離深影與遠距離擴散	卡片浮在背景之上	卡片貼在背景上無懸浮感

把這四個原理記在腦裡，調參數的時候就不會是亂試。當你覺得卡片「哪裡怪怪的」，對照這張表回推：是景深暗示跑掉了（模糊類型選錯或數值過大）、還是實體感消失了（省略描邊）、還是懸浮感不足（只有一層陰影）。每一次微調都對應到一個具體的視覺原理，效率會比憑感覺反覆試高得多。

從零做出一張毛玻璃卡片

在 Figma 裡從零做出一張毛玻璃卡片，流程是：先準備一個有內容的背景 Frame，上方放卡片 Frame，依序設定填色透明度 15 到 25%、加入 Background Blur 約 10 到 15px、補 1px 白色半透明描邊、最後加兩層投影。做完一定要進 Prototype 預覽，那是唯一能確認最終視覺的地方。

流程的起點是準備背景。毛玻璃一定要有「被穿透的內容」撐著，背景放圖片、漸層或彩色區塊才看得出效果，純白背景上做幾乎看不出差別，這是很多人第一個卡關的地方。理想的背景是色相分布豐富、明暗有對比的內容，例如城市夜景、漸層海報、彩色幾何拼貼，這類背景被模糊後仍能透出可辨識的色塊流動。如果還在找素材，可以從 商用免費圖庫素材總整理 挑一張有色彩層次的底圖，或用 Figma 圖庫外掛 直接插入。

接著處理卡片填色與模糊。填色用白色或淺色，透明度設 15 到 25%：低於 10% 會太透、看不出卡片邊界，高於 40% 則失去霧面感變成一片混色。判斷透明度是否到位的方法是，卡片上要能隱約看到背景的色塊流向，同時卡片本身仍維持一層均勻色調、邊界清楚可見。點 Effects 的加號選 Background Blur，數值落在 8 到 20px。這裡是最容易翻車的關節：Background Blur 模糊的是卡片後方的背景，Layer Blur 是模糊卡片自己，兩者千萬別搞混，選錯的話卡片連上面的文字都會糊掉。另一個常被忽略的細節是 Background Blur 在編輯區和 Prototype 裡的呈現會有微小差異，務必兩邊都檢查一次。

最後補 1px 白色描邊（透明度約 30 到 50%）模擬玻璃邊緣反光，再加兩層 Drop Shadow：一層近距離淺陰影、一層遠距離深陰影。近距離陰影建議偏移小、模糊半徑小、不透明度高；遠距離陰影偏移大、模糊半徑大、不透明度低。陰影的細節觀念可以對照 CSS Box Model 邊框與間距設定 對邊界與層次的討論，概念是相通的。

參數	建議區間	選錯的後果
填色透明度	15 到 25%	過高變混色，過低看不出卡片
Background Blur	8 到 20px	超過 30px 背景糊到只剩色塊
描邊	1px / 透明度 30 到 50%	省略後卡片邊緣扁掉、沒厚度
投影	兩層（近淺、遠深）	單層陰影讓卡片貼在背景上

做完務必進 Prototype 預覽。Figma 編輯區雖然會即時顯示 Background Blur，但唯有切到 Prototype 模式，才能確認最終呈現與互動時的視覺一致性。預覽時要特別留意兩件事：一是捲動背景時毛玻璃透出的色塊是否流動自然，二是互動狀態切換時玻璃質感有沒有不正常的閃動。如果你對 Prototype 的互動呈現還不熟，UI Prototype 原型設計要點 是很好的暖身讀物。

一個常見的進階做法是把整套毛玻璃參數存成 Figma Styles。Effects、Fill、Stroke 都能存成獨立樣式，深色背景一組、淺色背景一組，之後任何卡片都能一鍵套用，不用每次重新輸入數值。這在大型專案裡尤其重要，因為毛玻璃參數一旦散落到各個檔案、各自微調，後續要統一改風格會非常痛苦。把樣式集中管理，等於把「這就是本專案的玻璃質感標準」固化下來，團隊成員不會各自發明一套。

Background Blur vs Layer Blur：選錯模糊類型是質感崩壞的主因

做毛玻璃幾乎永遠用 Background Blur，因為它模糊的是卡片背後的內容、讓玻璃本身保持清晰；Layer Blur 會把卡片自己連同文字一起糊掉，通常只用在模糊整個圖層的場景，例如隱私遮蔽或景深。這是新手把毛玻璃做成「失敗品」的最常見原因。

Background Blur 的作用點在圖層下方的內容。卡片本身的文字、圖片維持銳利，背景則被柔化成一層霧，背景流動的色塊穿透玻璃後仍看得見。Layer Blur 則相反，它作用在圖層本身，整個圖層連內容一起被糊化，適合做背景柔化、敏感資訊遮蔽、攝影景深，不適合放文字的毛玻璃卡片。

很多人在卡片上疊了文字，卻選了 Layer Blur，結果連文字都看不清楚，回頭懷疑自己是不是毛玻璃做失敗了。其實是選錯類型。把 Layer Blur 換回 Background Blur，文字立刻恢復銳利。判斷自己選錯的最快訊號是：如果卡片上的標題、按鈕、輸入框文字全部跟著背景一起糊掉，那就是 Layer Blur 在作用，毛玻璃卡片絕不該出現這個狀況。這個觀念如果你想要更系統化地打底，Figma 完整指南從註冊到精通 對 Effects 面板有完整的說明，Figma 新手必裝外掛清單 與 Figma 圖示 Icon 外掛推薦 也能幫你把卡片裡的元件補齊。

項目	Background Blur	Layer Blur
作用對象	圖層下方的背景內容	圖層本身
卡片文字	保持銳利	連文字一起糊掉
建議數值	8 到 20px	視用途，無固定區間
典型用途	毛玻璃卡片、導覽列	隱私遮蔽、景深、柔焦
放文字適合度	適合	不適合

進一步說，一張卡片其實可以同時混用兩種模糊：底層用 Background Blur 透出背景，再對某個裝飾圖層用 Layer Blur 做柔焦，這是進階搭配手法。例如卡片背景放一個彩色幾何圖形，用 Layer Blur 把它柔化成色光暈染，再在最上層疊一張 Background Blur 的玻璃面板，這樣做出來的層次會比單純一層背景模糊更豐富。Background Blur 建議落在 8 到 20px，超過 30px 背景會糊到只剩色塊、失去層次；Layer Blur 則視用途可更大，沒有固定區間。模糊的目的是讓背景被穿透但細節仍清晰，開得愈大並不等於質感愈好。

毛玻璃看起來糊又髒的常見原因與修正

照著做了毛玻璃，成品卻灰濛濛、沒質感，問題通常集中在兩類：一類是背景與填色這層「內容」沒準備好，一類是描邊、陰影、模糊值這層「結構」失衡。把它們分開看，修正方向會清楚很多。

內容層最常見的失誤是背景純色或沒有圖層。毛玻璃需要豐富的背景內容才能透出色塊流動，純白背景上做等於白做，再漂亮的參數都沒有用；修正方法是換一張色相豐富的底圖，或在背景 Frame 裡放幾個彩色矩形、漸層與圖示，讓玻璃有東西可以透。另一個內容層失誤是填色透明度設太高，超過 40% 時霧面感會糊成混色，整張卡片看起來像一片混濁色塊，這時先把透明度壓回 20% 左右通常就能改善。色彩搭配的觀念可以對照 色彩學對比與互補色配色 與 色相環實戰配色技巧，把填色和背景的關係想清楚。

結構層的失誤則多半出在模糊值與邊框陰影。模糊值過大、Background Blur 超過 30px 時，背景糊到失去細節，玻璃反而像一塊實心色板沒有穿透感；省略 1px 白色描邊與多層投影，卡片邊緣缺乏反光與厚度，整個畫面會扁掉。這兩個修正起來最直接：把模糊值壓回 20px 以內，補上描邊與兩層陰影，質感通常立刻回來。而最容易被忽略的是深淺背景套用同一組參數，淺色背景上白色填色透明度要更低，深色背景上反而可以稍高、並改用深色或彩色填色，參數要跟著背景走，這也是實務上會把深淺兩組樣式分開存的道理。

還有一個隱藏問題是螢幕校色。如果你在自己的螢幕上調到滿意，交給同事看卻完全不是同一回事，往往是雙方螢幕的色域與伽馬值不一致。毛玻璃這類高度依賴透明度與明暗對比的效果，對螢幕差異特別敏感。修正方式是在 Prototype 預覽時，至少在兩台不同校色的螢幕上各看一次，並檢查極亮與極暗兩種背景下的表現，確保參數在不同裝置上都能成立。

毛玻璃用在哪裡最出效果

毛玻璃最適合用在需要「浮在豐富背景之上」的元件：固定式導覽列與 Tab Bar、彈出式卡片與 Modal、登入與付費表單、音樂播放器與工具面板。共同特徵是背景有圖片或漸層、前景元件需要與背景產生層次。

行動版最常見的用法是固定式導覽列與底部 Tab Bar。捲動時背景內容透過半透明導覽列，既維持可讀性又保留頁面連續感；不過導覽列的填色透明度通常要再比一般卡片低一些，因為它要壓過的文字量較大，太透會讓導覽文字難讀。彈出卡片與 Modal 則是另一個高頻場景：毛玻璃 Modal 疊在頁面上方時會自然聚焦內容，比純黑遮罩更輕盈，因為純黑遮罩會把背景完全切斷、讓使用者失去空間感，而毛玻璃保留背景的色塊流動，使用者知道自己還在原來的頁面上，只是暫時被引導到一個浮層。登入、註冊、結帳表單也屬於這一類，表單卡片用毛玻璃浮在有故事的背景圖上能降低填寫的枯燥感，但表單可及性要另外顧，可參考 CTA 按鈕設計心理學與案例。

常駐型功能面板是另一個適合的類別，包括音樂播放器的迷你控制列、儀表板的通知浮層、繪圖軟體的工具浮動面板。這類面板需要常駐在背景之上，毛玻璃能區分主從層級又不完全遮蔽背景資訊。排版脈絡可以對照 網頁版面 RWD 響應式排版 與 Figma 網格系統與排版設定。反過來說，不適合的場景也很明確：大量文字的內容區塊、無背景層次的純色頁面、需要極致效能的低階裝置介面，硬上毛玻璃只會讓文字更難讀、效能更卡。

使用場景	適合度	關鍵考量
固定式導覽列、Tab Bar	高	透明度要比一般卡片更低，維持文字可讀
彈出 Modal、Dialog	高	比純黑遮罩輕盈，保留空間連續感
登入、註冊、結帳表單	中高	背景要有故事性，文字對比要顧
音樂播放器、儀表板面板	高	常駐浮層，區分主從層級
大量文字內容區塊	低	背景透出會降低文字對比，傷可讀性
純色無層次頁面	低	沒有背景可透，毛玻璃失去意義
低階裝置介面	低	backdrop-filter 吃效能，可能卡頓

判斷毛玻璃適用性的決策矩陣

很多人在學會毛玻璃之後，會想把所有卡片都套上這個效果。這是常見的過度使用。毛玻璃是有代價的視覺風格：它吃背景、吃效能、吃對比控制，硬套到不適合的場景只會拖累整個介面。把「背景豐富度」和「元件資訊密度」當成兩個軸，可以畫出一張決策矩陣，幫你判斷某個元件到底適不適合上毛玻璃。

	背景豐富（圖片、漸層）	背景單調（純色、空白）
元件資訊少（圖示、標題）	最適合：毛玻璃能完整發揮層次感	不適合：沒有背景可透，玻璃變塑膠片
元件資訊中等（卡片、表單）	適合：需注意文字對比，壓低透明度	不適合：用扁平化或純色卡片即可
元件資訊密集（長文、表格）	不適合：背景透出會嚴重傷可讀性	不適合：用純色背景配高對比文字

使用這張矩陣的方式很直接：先判斷這個元件要疊在什麼樣的背景上，再判斷元件本身要承載多少資訊。落在「適合」的格子才考慮毛玻璃，落在「不適合」的格子就改用扁平化或純色卡片。資訊密集的長文區塊尤其要避開，因為半透明背景會讓密集的文字難以聚焦，這和可及性的考量是一致的。把這張矩陣當成第一道篩選，能幫你把毛玻璃收斂在真正能加分的地方，而不是無差別套用。決策時也可以參考 網頁設計必備關鍵元素 與 網頁設計常見錯誤地雷 對「什麼時候該克制」的討論。

Glassmorphism 與其他風格的差異：和 Neumorphism、扁平化怎麼選

扁平化重清晰與效率、Neumorphism 重擬物的內凹立體感、Glassmorphism 重穿透與空間層次。要表現「浮在豐富內容之上」就選毛玻璃，要表現「同一平面的按鈕凹凸」選 Neumorphism，要極致簡潔與效能選扁平化。三者可以混搭。

扁平化（Flat Design）去除所有立體效果，用純色塊與邊框組成，優點是清爽、載入快、可讀性高，缺點是層次感弱。毛玻璃其實是為了補扁平化的層次而生：在扁平的骨架上，用半透明模糊把前後空間做出來。要選毛玻璃還是純扁平，可以先看 網頁設計 UIUX 完整指南 裡對風格的整體討論。

Neumorphism（新擬物）用同色系的明暗陰影做出內凹或外凸，強調觸感，但對比低、可及性差，不適合放重要資訊。Glassmorphism 靠半透明與模糊建立前後空間，層次最豐富，但對背景內容與裝置效能要求最高，也不適合純文字密集區。對風格演進有興趣的話，網頁設計趨勢與 AI 應用實例 把這幾年流行的介面語彙整理得很完整；卡片上的字體搭配，則可以參考 中文字體黑體明體推薦 與 英文字體襯線非襯線推薦。

風格	核心訴求	層次感	效能負擔	適合放文字
扁平化 Flat	清晰、效率	弱	低	適合
Neumorphism	觸感、擬物凹凸	中	中	不適合（對比低）
Glassmorphism	穿透、空間層次	最豐富	高	適合（需注意對比）

三者可以混搭：主結構用扁平化維持清晰，重點卡片或彈窗用毛玻璃做層次，按鈕局部用 Neumorphism 做回饋。選擇的判斷很單純，先問自己「這個元件需要浮在什麼之上」。有豐富背景要穿透就毛玻璃，要在同色背景做出立體就 Neumorphism，都不需要就扁平化。這個分類邏輯和 網頁設計必備關鍵元素、Bento Grid 網頁排版設計 與 排版設計字體與視覺層次技巧 裡談的層次觀念是一致的；要找更多視覺參考，網頁設計靈感參考網站 是很好的起點。

毛玻璃實戰注意事項：效能、可及性與跨裝置呈現

實際上線要注意三件事：模糊效果在低階裝置與舊瀏覽器可能被降級或吃效能、半透明卡片上的文字對比要確保可讀性、深淺背景與行動版的參數要分開調。設計階段先用 Figma Prototype 確認，再交給前端用 backdrop-filter 實作。

先談效能。毛玻璃在網頁上靠 CSS 的 backdrop-filter: blur() 實作，會佔用 GPU 運算。大量重複使用或搭配捲動，可能在低階手機造成卡頓，建議節制使用在導覽列、Modal、表單這類重點元件，不要全頁大量重複。截至 2026 年，backdrop-filter 在 Chrome、Edge、Safari、Firefox 等主流瀏覽器皆已支援[來源：Can I Use / MDN Web Docs]，但部分舊版仍會直接忽略，需準備退化方案，例如用半透明純色作為 fallback。

效能之所以要斤斤計較，是因為渲染效能直接影響使用者的關鍵行為。Google 在 web.dev 整理的多個案例顯示，頁面速度與轉換率、跳出率有明確關聯：Vodafone 把 LCP 改善 31% 後銷售提升 8%，redBus 改善 INP 後銷售提升 7%，The Economic Times 通過 Core Web Vitals 門檻後跳出率改善 43%[來源：web.dev（Google）〈https://web.dev/articles/why-speed-matters〉〈2026〉]。毛玻璃的 backdrop-filter 正是會拖慢這些指標的渲染成本之一，所以在低階裝置上節制使用、保留 fallback，會直接反映在使用者是否願意留下來。core web vitals 與效能優化的整體觀念可以對照 響應式網頁設計 RWD 觀念 與 網頁設計常見錯誤地雷。

以這類把毛玻璃大量套用在首頁 Hero、全寬導覽列與商品卡片的內容站為例，常見的狀況是桌面版看起來漂亮，行動版卻開始卡頓。依典型表現幅度，一個原本 LCP 落在約 2.5 到 3.2 秒的頁面，在首屏疊加多層 backdrop-filter、又搭配捲動視差之後，LCP 往往會被往後推到約 4 到 5.5 秒，INP 也因為每幀要重算模糊而從約 150 到 200 毫秒惡化到約 300 到 450 毫秒，這時手機版的 Core Web Vitals 通常會從「良好」掉到「需要改善」。實務上常見的處理方向是收斂使用範圍，把毛玻璃集中在一到兩個重點元件（例如固定導覽列或登入 Modal），Hero 改用預先模糊好的圖片取代即時 backdrop-filter，並為低階裝置準備半透明純色 fallback。要誠實說明的限制是：這組幅度是依這類站的典型表現推估，實際數字會隨背景複雜度、卡片數量、裝置等級而浮動，不是任何網站套了毛玻璃就一定掉這麼多；但在沒有先量測基線的情況下貿然全頁套用，風險確實偏高。因此決策角度是：上線前先用 Lighthouse 或實機錄製量一次基線 LCP 與 INP，再決定毛玻璃要放幾層、要不要保留 fallback，而不是照設計稿原樣全數落地。

再談可及性。半透明卡片上的文字容易因為背景透出而降低對比，務必檢查文字與背景的對比值是否符合 WCAG 建議[來源：〈WCAG 2.1 Contrast (Minimum)〉〈https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html〉〈2023〉]，必要時加深文字顏色或降低背景透明度。WCAG 對一般文字建議的最低對比是 4.5:1，大字體（18pt 以上或 14pt 粗體）是 3:1；半透明背景因為底層色塊會浮動，實際對比值會跟著背景變化，這代表你不能只在一個背景畫面量一次就放心，要挑背景最不利（通常是和文字色最接近的色塊）的瞬間來檢查。一個毛玻璃卡片再漂亮，文字讀不清楚就失去意義，這和 色彩心理學與用戶心理 裡強調的可用性是一條線的。

深淺背景要分開處理。深色背景上的毛玻璃填色常改用深灰或品牌色、透明度略高；淺色背景則用白色、透明度更低，參數不能一組用到底。行動版更要留意，手機螢幕小、背景可透出的範圍有限，模糊值與透明度建議比桌面版再低一階，避免在小卡片上糊成一團。跨裝置的排版觀念可以對照 Figma 響應式行動版排版 與 AWD 與 RWD 自適應設計比較。

毛玻璃並不是萬靈丹。它吃效能、吃背景、吃對比控制，用錯地方反而拖累整個介面；把使用範圍收斂在「需要浮在豐富背景之上」的元件，它帶來的層次感是其他風格很難取代的，蘋果和微軟長期把它放在系統介面的核心位置是有道理的。想把它落實到實際網站，免費 UIUX 自學資源地圖 提供了從設計到上線的銜接路徑。

從 Figma 到前端：backdrop-filter 的實作要點

設計稿做好之後，要交給前端落地，對應的 CSS 就是 backdrop-filter。理解這段實作，設計師才能在設計階段就避開前端無法還原的參數，也才知道 Prototype 預覽和實際網頁之間會有哪些落差。

backdrop-filter 的語法是對某個元素套用 backdrop-filter: blur(Npx)，它模糊的是這個元素背後的內容，元素本身保持原樣。這和 Figma 的 Background Blur 概念完全對應。常見的寫法是搭配一層半透明背景色，例如 background: rgba(255,255,255,0.2) 再配上 backdrop-filter: blur(12px)，外加一層細邊框 border: 1px solid rgba(255,255,255,0.4) 和兩層 box-shadow。要注意的是 backdrop-filter 必須配合半透明的背景才看得到效果，如果背景完全不透明，模糊就沒有東西可以透。

跨瀏覽器的相容性是落地階段最容易踩雷的地方。Safari 早期需要加 -webkit- 前綴，寫成 -webkit-backdrop-filter: blur(Npx)，雖然現代 Safari 已支援標準寫法，但為了保險，實務上會兩個都寫。完全不支援 backdrop-filter 的舊瀏覽器會直接忽略這個屬性，這時候元素就只剩半透明背景色，沒有模糊層，看起來會像一塊普通的半透明面板。退化方案就是在這個半透明背景色上做文章：把它的不透明度調高一點、補上更明顯的邊框與陰影，讓它在沒有模糊的情況下仍然堪用；低階裝置則可考慮用 prefers-reduced-motion 與媒體查詢降級模糊，並避免在大量捲動的長清單上套用 backdrop-filter。前端實作的細節觀念可以對照 CSS 基本語法與響應式教學 與 CSS Box Model 邊框與間距設定。

設計師能幫上忙的，是在交付文件裡標明每個毛玻璃元件的數值，並註明它預期的背景類型（豐富圖片、漸層、還是純色），讓前端知道 fallback 該長什麼樣子。一份清楚的交付文件比十次來回溝通有效，也能避免前端因為看不懂設計意圖而隨便猜數值，最後上線的成品和設計稿差一大截。如果你想建立完整的設計交付流程，網頁設計 UIUX 完整指南 與 免費 UIUX 自學資源地圖 有系統化的整理。

進階毛玻璃技法：色相調整、雙層玻璃與動態效果

基礎毛玻璃熟了之後，有幾個進階手法可以讓質感再往上推一階，它們都建立在四個基本要素之上，只是用更細膩的方式去操作填色、結構與動態。

在填色端，預設的白色玻璃是最常見的版本，但如果背景本身有強烈色彩（例如藍色海洋或橘色夕陽），把填色換成帶一點背景互補色的淺色，可以讓玻璃和背景產生更和諧的色彩呼應。做法是把填色從純白改成非常淺的藍、淺紫或淺米色，透明度維持在 15 到 25%。這個微調在純白背景上幾乎看不出差別，但在色彩豐富的背景上會讓玻璃「融」進去，質感提升明顯。色彩搭配的原理可以對照 色彩學對比與互補色配色 與 色相環實戰配色技巧。

在結構端，雙層玻璃是常用的進階手法：在主卡片後方再墊一層半透明色塊，給它更低的透明度（例如 8 到 12%）和較小的模糊值，用來模擬玻璃背面的折射。成品會出現兩層前後關係，主卡片浮在最前面、折射層在後方略微透出，整個層次感會比單層玻璃更扎實。這個手法常用在 Modal 和大型登入卡片上，因為它們面積夠大，才放得下雙層結構而不顯擁擠。動態端則是在 Figma 裡用 Smart Animate 讓毛玻璃卡片在互動時柔和地放大或位移，背景透出的色塊會跟著流動，產生一種玻璃正在輕輕浮動的感覺；動畫時長建議落在 200 到 400ms，過長會讓玻璃質感變得遲鈍。動態毛玻璃上線後還要留意前端的效能成本，因為 backdrop-filter 在動畫過程中每一幀都要重新計算模糊，會放大 GPU 負擔。動態效果的實作可以參考 Figma 動態按鈕轉場動畫 與 Figma 滑鼠追蹤視差互動效果。

進階技法	核心操作	適用元件	風險
色相調整填色	填色改為背景互補的淺色	任何毛玻璃卡片	低，色彩判斷要準
雙層玻璃	主卡片後墊一層低透明度折射層	大型 Modal、登入卡片	中，結構變複雜
動態毛玻璃	Smart Animate 配合背景流動	彈出卡片、互動浮層	高，吃前端 GPU

毛玻璃設計檢查表

交稿或上線前逐項打勾，能避免絕大多數的毛玻璃翻車狀況。這裡只列參數表與決策矩陣沒有直接涵蓋、但容易在收尾時漏掉的檢查點。

• 遮住背景看卡片：若變成一片毫無細節的純色，代表它只是半透明色板，不是玻璃
• 捲動與互動狀態切換時，在 Prototype 預覽確認色塊流動自然、玻璃沒有不正常閃動
• 挑背景最不利（與文字色最接近）的瞬間量對比，確認仍符合 WCAG 一般文字 4.5:1
• 在兩台不同校色的螢幕上各看一次，避免只在自家螢幕調到滿意
• 已準備 backdrop-filter 不支援時的 fallback，並避免在快速捲動的長清單上套用

毛玻璃設計常見問題（FAQ）

以下是做毛玻璃時最常被問到的疑問，挑出幾個正文沒有單獨成段、但實作時一定會卡關的點來回答。

Figma 免費版能做毛玻璃效果嗎？

可以。Background Blur 與整個 Effects 面板都是免費功能，付費版差別主要在協作人數與歷史版本數量，不影響毛玻璃本身的製作。免費帳號做毛玻璃完全沒有限制。

為什麼我做了毛玻璃卻完全沒有模糊效果？

九成是卡片底下沒東西可透。毛玻璃得有豐富背景才有意義，純色或空白底上做等於沒做。順手確認 Effects 選的是 Background Blur（不是 Layer Blur）、數值也不是 0。

毛玻璃上的文字為什麼會跟著糊掉？

幾乎都是誤用了 Layer Blur。它糊的是圖層本身、連文字一起；換成 Background Blur 就好，它只動卡片後方的背景，文字立刻回到銳利。

Figma Prototype 裡看得到毛玻璃的模糊效果嗎？

看得到，而且 Prototype 是確認最終視覺的唯一方式。編輯區的顯示已經很接近，但不等於互動後的結果，唯有切到 Prototype 模式才能確認模糊在實際呈現與互動時的一致性。

什麼情況下不該用毛玻璃？

三種情況要避開：大量文字的內容區塊（背景透出會傷可讀性）、沒有層次的純色頁面（沒有背景可透，玻璃變塑膠片）、需要極致效能的低階裝置介面（backdrop-filter 吃 GPU）。只要背景單調或元件資訊密集，就改用扁平化或純色卡片。