跳到主要內容
Numio

玻璃擬態產生器

使用 backdrop-filter 製作毛玻璃面板。在即時背景上調整模糊、透明度、飽和度和邊框，再複製 CSS。

即時預覽

毛玻璃

玻璃上的文字需要與背景的每個部分都有足夠的對比。

背景僅供預覽，不會匯出。

.glass {
  background: rgba(255, 255, 255, 0.2);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  backdrop-filter: blur(12px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 20px;
  box-shadow: 0 8px 32px rgba(15, 23, 42, 0.25);
}

所有操作都在您的瀏覽器中完成。

格式參考資料

工具頁面更新日期：