近幾年，許多作業系統介面和設計社群開始大量出現一種半透明、帶毛玻璃模糊效果的介面風格，後來被稱為玻璃擬物化（Glassmorphism）。它看起來輕盈、有層次，很快就從介面設計延伸到網頁的首頁主視覺、產品介紹頁和儀表板。另一方面，瀏覽器的 WebGL 能力日漸成熟，透過 Three.js 這類函式庫在網頁上即時渲染 3D 場景，已經是常見作法。兩者結合時，玻璃面板後方不再只是一張漸層背景，而是會轉動、有光影的立體物件，視覺張力明顯不同。不過好看的背後，效能、文字可讀性和瀏覽器相容性都要事先想清楚。這篇文章從設計風格本身談起，再說明怎麼和 3D 渲染整合，以及上線前需要處理的挑戰。
玻璃擬物化的設計語言：透明、模糊與層次
玻璃擬物化的核心，是模擬一片磨砂玻璃放在畫面上的感覺。常見的組成元素有四個：半透明的底色，讓背後的內容隱約透出；背景模糊，讓透出來的內容變成柔和的色塊，而不是干擾閱讀的細節；一道很細、偏亮的邊框，模擬玻璃邊緣的反光；以及柔和的陰影，讓面板和背景之間產生距離感。這四個元素疊在一起，使用者就能直覺感受到「這是一層浮在上面的東西」。
這個風格有一個常被忽略的前提：玻璃後面一定要有東西。如果背景是一片純白或純灰，模糊之後什麼都沒有，玻璃面板就只是一個淡淡的方框，質感出不來。所以玻璃擬物化通常會搭配鮮明的漸層、色彩飽和的幾何圖形，或是照片與插畫當背景。設計時要把背景和玻璃層當成一組來規劃，而不是先做好版面再隨便套上半透明效果。層次也不宜太多，兩到三層玻璃疊加通常已經足夠，再多容易讓畫面變得混濁、看不出主次。
用 CSS 做出玻璃質感的基本作法
在網頁上實作玻璃效果，關鍵屬性是 backdrop-filter。它和 filter 不同：filter 處理的是元素本身，backdrop-filter 處理的是元素「後面」的畫面。一個基本的玻璃卡片大致可以這樣寫：
.glass-card {
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(16px) saturate(140%);
-webkit-backdrop-filter: blur(16px) saturate(140%);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 16px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}調整時可以留意幾個參數之間的關係。底色透明度越低，背景透出越多，但文字越難讀；模糊半徑越大，背景越接近純色，質感越柔和，但運算成本通常也越高。saturate() 可以讓模糊後的顏色不至於灰濛濛的。部分 Safari 版本需要加上 -webkit- 前綴，實務上兩行一起寫比較保險。對於不支援的瀏覽器，可以用 @supports 先給一個不透明度較高的底色當作後備，偵測條件也要把帶前綴的寫法一起納入：
.glass-card { background: rgba(255, 255, 255, 0.85); }
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
.glass-card { background: rgba(255, 255, 255, 0.15); }
}這樣不支援模糊的環境至少能看清楚文字，支援的環境才換上真正的玻璃效果。
結合 Three.js：讓玻璃後面有真正的景深
把玻璃擬物化和 3D 渲染結合，常見有兩種作法。第一種是「HTML 玻璃層疊在 WebGL 畫布上」：用 Three.js 在 canvas 裡渲染會旋轉、隨滑鼠移動的立體物件，再把用 CSS 做的玻璃卡片疊在上方。這種作法開發門檻較低，文字仍是一般 HTML，搜尋引擎和螢幕閱讀器都讀得到，也方便排版與修改內容。
第二種是「把玻璃做進 3D 場景裡」。Three.js 的 MeshPhysicalMaterial 提供幾個和玻璃相關的屬性，可以在 3D 空間中模擬透光與折射：
- transmission：控制光線穿透物體的程度，數值越高越像透明玻璃。
- roughness：表面粗糙度，數值提高時穿透的畫面會變模糊，接近磨砂玻璃。
- thickness：玻璃厚度，會影響折射的扭曲程度。
- ior：折射率，決定光線偏折的強弱。
這種作法能做出 CSS 做不到的效果，例如背景物件經過玻璃邊緣時產生折射變形、玻璃本身隨角度反射環境光。視覺上的突破在於「深度是真的」：使用者移動滑鼠或捲動頁面時，前景玻璃和後方物件以不同速度移動，視差與光影一起變化，比平面的漸層背景更有空間感。不過內容若放在 3D 場景裡，文字就不再是可選取、可索引的 HTML，因此實務上常是兩種作法混用：3D 場景負責氛圍與主視覺，關鍵文字和按鈕仍用 HTML 玻璃層呈現。
實務挑戰：效能、可讀性與相容性
效能負擔
backdrop-filter 本身就需要不少運算，因為瀏覽器要先取得元素後方的畫面再做模糊。當後方是一個持續重繪的 WebGL 畫布，模糊也得跟著每一幀重新計算，在中低階手機上很容易出現掉格、發燙或捲動卡頓。比較穩健的作法包括：控制玻璃面板的數量與面積，不要整頁都是玻璃；模糊半徑夠用就好；用 renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2)) 限制高解析度螢幕的渲染量；搭配 IntersectionObserver，在 3D 區塊離開畫面時暫停渲染迴圈；Three.js 相關程式碼也可以延遲載入，避免拖慢首次載入速度。
文字可讀性與無障礙
玻璃面板的背景是會變動的，同一段文字可能一下壓在淺色物件上、一下壓在深色物件上，對比度很難固定。WCAG 對一般內文建議的對比度是 4.5:1，玻璃效果很容易在某些位置低於這個標準。可以提高玻璃底色的不透明度、為文字加一層更深的底板，或讓 3D 物件避開文字主要區域。動態部分則應尊重 prefers-reduced-motion 設定，對偏好減少動態的使用者停止或減緩 3D 動畫。
相容性與降級策略
不是每台裝置都適合跑 3D 場景和即時模糊。上線前應在不同等級的手機、平板與桌機上實測，並準備降級方案：偵測到 WebGL 無法使用或裝置效能不足時，改用一張預先渲染好的靜態圖片當背景，玻璃層改為較不透明的底色。這樣即使在條件較差的環境，版面與內容仍然完整，只是少了動態效果。判斷一個專案是否適合這樣做，可以先問：視覺衝擊是不是這個頁面的主要目的？主要訪客使用的裝置能不能負擔？若答案不明確，把效果集中在首頁主視覺，內頁維持簡潔，通常是比較務實的取捨。