液態玻璃是什麼？
Apple 在 WWDC 2025 發表的半透明介面材質 Liquid Glass——它實際上是什麼、從何而來， 以及它和先前流行的玻璃擬態究竟差在哪裡。
最後校訂: 2026年8月3日
一句話回答
液態玻璃是一種材質，不是配色方案，也不是某個濾鏡。 它是 Apple 在 WWDC 2025 發表、隨後鋪滿 iOS 26、iPadOS 26、macOS 26 Tahoe、 watchOS 26、tvOS 26 與 visionOS 26 的那層半透明表面——自 2013 年 iOS 7 把一切扁平化以來，Apple 最大規模的一次視覺改版。
它和先前所有「霧面面板」的差別在於：它的行為是光學的。 它不是把背後的內容糊掉，而是像真實透鏡那樣把內容折彎； 它會接住隨裝置傾斜而移動的高光；它自身的色調與陰影會隨著底下滑過的內容改變。 內容一動，玻璃就有反應。與其說它是一個 CSS 效果，不如說它是一個被模擬出來的 物理物件。
中文裡怎麼稱呼它
Apple 繁體中文官網把 Liquid Glass 譯作「液態玻璃」， 簡體中文寫作「液态玻璃」。開發者文件與 WWDC 議程標題仍沿用英文原名， 所以中文討論裡中英夾雜相當常見，兩種寫法指的是同一件事。
有三個容易混淆的詞，值得先分開：
- 玻璃擬態（glassmorphism）——更早、更廣義的那個視覺風格， 中文裡也常被叫作「毛玻璃效果」或「霧面玻璃效果」。它和液態玻璃並非同一件事， 下面另有一節專講兩者的差別。
- 壓克力材質（Acrylic）——微軟 Fluent Design 裡的對應概念。 同樣是半透明面板，但建立在雜訊與模糊之上，不做折射。
- 液態金屬、非晶合金——完全無關的材料學概念，只是名字相近。
還有一個歧義值得提醒：「液態玻璃」在化工領域另有所指，是矽酸鈉溶液的俗稱 （也叫水玻璃），一種製作塗層與黏著劑的原料。搜這四個字得到的結果裡， 有相當一部分是防水塗料而不是介面設計。本文講的是後者。
它從何而來
Apple 在 2025 年 6 月 9 日的 WWDC 上首次展示了它，同一場發表會也把所有作業系統 改為以年份編號——所以是 iOS 26 而不是 iOS 19。有兩場議程深入介紹了它：Meet Liquid Glass 與 Build a SwiftUI app with the new design。
但它的來歷比一場發表會長得多。你可以把液態玻璃理解為 Apple 把自己二十年的實驗 收攏到了一處：早期 Mac OS X 裡 Aqua 的光澤與縱深、iOS 7 帶來的即時背景模糊、 iPhone X 手勢與動態島那套流體動態語言，以及最直接的來源——visionOS 的玻璃面板， 在那裡介面表面必須能可信地待在一個真實房間中。液態玻璃就是那種 visionOS 材質 被帶回了平面螢幕。
外界反應並非一面倒。早期測試版因可讀性問題受到持續批評，Apple 在 26.1 系列更新裡補上了削弱這個效果的選項——在預設的清透外觀之外， 增加了一種更不透明的著色外觀，這還是在系統原有的「降低透明度」與「增加對比」 輔助使用設定之上。在你整套照搬這個視覺之前，這段歷史值得知道。
Apple 自己關於如何採用它的指引，收在 人機介面指南（HIG）裡。
液態玻璃與玻璃擬態的差別
這兩個詞常被混用，但它們不是同一件事。
玻璃擬態（glassmorphism）是更早也更廣義的那個詞， 由設計師 Michal Malewicz 於 2020 年 11 月提出，幾週之內傳遍網路。 它描述的是一種外觀：一塊半透明面板、面板背後的背景被模糊、 一圈細如髮絲的亮邊勾出輪廓、一層柔和的陰影把它托起。在網頁上， 它就是四條 CSS 屬性——backdrop-filter: blur()、半透明背景、低透明度框線、一個 box shadow。它是靜態的： 面板靜止時與動畫途中的模糊完全一樣。
液態玻璃是 Apple 在 2025 年把這個想法推向動態的結果。 真正關鍵的那句差別是：玻璃擬態模糊它背後的東西，液態玻璃折射它。再加上會跟隨裝置運動的鏡面高光、隨底下內容變化的色調與陰影， 以及隨介面變化彼此變形、融合的形狀——你得到的是一種逐格模擬出來的材質， 而不是一次宣告完成的樣式。
實際情況是：網路上以「液態玻璃」名義發表的網頁作品，多數其實是打光更好的玻璃擬態。 要在瀏覽器裡做出真正的折射，需要位移貼圖或著色器，靠backdrop-filter 是辦不到的。兩類在 UI 作品集裡都有不少，知道該看邊緣之後就很容易分辨——真折射會把面板背後穿過的直線扭曲掉。
它是怎麼做出來的
在 Apple 平台上，這件事基本是現成的。SwiftUI 裡用 .glassEffect() 修飾符就能把這種材質套用到 自訂視圖上；GlassEffectContainer 把多個玻璃形狀歸為一組，讓它們彼此混合、受同一套光照，並能互相變形—— 這同時也是效能較好的路徑，因為容器是把整組算繪一次，而不是每個形狀各算繪一遍。
網頁上沒有對等的原生能力，只能重建這個效果。目前流行的做法，大致依還原度排序：
- 純 CSS——
backdrop-filter搭配分層的框線與高光。成本低、支援度好，但止步於玻璃擬態：沒有折射。 - SVG 濾鏡——用漸層驅動
feDisplacementMap，在邊緣把背景折彎。 不用 WebGL 也能做出真折射。參見 Liquid Glass SVG filters。 - WebGL／著色器——最接近的一檔，畢竟折射、色散與高光 本來就是片段著色器的本行。Liquid Glass Studio 是目前最完整的網頁復刻；Liquid Glass Vue 則是同一思路下較小的 Vue 3 實作。
- 框架元件——已經封裝好的實作，有 React 版與 Flutter 版；設計階段則可以用 Figma 裡的原生玻璃效果。
以上這些全都收在 資源裡。
用它做設計
出錯的方式高度一致且可預測：玻璃上的文字一旦壓在花俏的背景上，就沒法讀了。 Apple 自己撞得夠公開，以至於在一次小改版裡補上了不透明度選項。 如果你只從 HIG 帶走一條原則，就帶這條——玻璃是給浮在內容之上的那一層用的，不是給內容本身用的。工具列、標籤列、動作表單與控制項可以坐在玻璃上， 內文不行。
還有兩條值得內化。第一，對比度不是選配：拿每一塊玻璃表面去對它可能落在的 最花俏背景做檢查，而不是挑一個方便的；把「降低透明度」當作要認真支援的設定， 而不是邊緣情況。第二，克制本身會被讀成「有意為之」——真正站得住的介面 只在一到兩層上用玻璃，其餘保持實心。玻璃疊玻璃疊玻璃，看起來就像個示範。