黑底上的毛玻璃:深色模式 glassmorphism 踩坑記

  • CSS
  • 設計

這個站的卡片、頁首都是毛玻璃(glassmorphism)。淺色模式的配方很快就定了,深色模式卻改了兩版才能看。記錄一下。

淺色:經典 iOS 配方

.glass {
  background: rgb(255 255 255 / 0.72);
  backdrop-filter: blur(25px) saturate(1.8);
  border: 1px solid rgb(255 255 255 / 0.35);
  box-shadow: 0 10px 30px rgb(0 0 0 / 0.08);
}

關鍵是 saturate(1.8):blur 會把背景顏色抹淡,拉高飽和度讓顏色重新「透」出來,玻璃才不會像一層灰霧。這基本上就是 iOS Regular Material 的思路。

深色第一版:炭黑玻璃,失敗

直覺的做法是把白色底換成深色底,例如 rgb(28 28 30 / 0.68)。結果卡片和近黑的背景幾乎融在一起,整頁像沒有層次的一塊黑,文字可讀性也差。

問題出在物理直覺:毛玻璃的效果來自「背景透過來」,但黑底透過來還是黑,blur 得再用力也做不出材質感。深色介面上再疊深色半透明,等於什麼都沒發生。

深色第二版:用白色 tint 提亮

查了一圈,黑底 glassmorphism 的通用解法是反過來——用白色系的半透明底(10%~25% 透明度)讓玻璃從黑底浮起來:

[data-theme='dark'] .glass {
  background: rgb(213 229 247 / 0.16);
  backdrop-filter: blur(25px) saturate(1.8) brightness(1.3);
  border-color: rgb(255 255 255 / 0.18);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.12),
    0 10px 30px rgb(0 0 0 / 0.4);
}

幾個細節:

  • 底色不是純白,帶一點藍(213 229 247),配合背景的藍圖網格,比純白更有深度。
  • brightness(1.3) 加在 backdrop-filter 裡,把透過玻璃的光點再拉亮一階。純黑的部分乘多少都還是黑,所以它主要照顧的是背景裡的發光元素。
  • inset 的白色內光模擬玻璃上緣的反光,是廉價但有效的立體感。

透明度是可讀性的閥門:0.16 是目前的平衡點,再高卡片更白、但淺色文字的對比會開始吃緊。

一個教訓

深淺兩個主題的玻璃不是同一組參數的鏡像,而是兩套邏輯:淺色靠「壓暗背景、透出顏色」,深色靠「疊亮、把卡片抬出來」。做主題時把它們當成兩個獨立的設計題,會比想著「反轉」快得多。