設計 / CSS

毛玻璃效果CSS產生器（毛玻璃效果）

使用CSS的backdrop-filter建立毛玻璃效果：在繽紛預覽背景上調整模糊、色調、透明度、飽和度、邊框和圓角半徑，並複製可在目前各瀏覽器運作的CSS。

毛玻璃效果CSS產生器（毛玻璃效果）: backdrop-filter: blur()會模糊元素後方的內容，saturate()則會讓這些色彩更加鮮豔。半透明背景會為玻璃增添色調，淡淡的亮色邊框則能捕捉邊緣，就像真正的玻璃一樣。加上-webkit-前綴的那一行可支援Safari 18之前的版本。 全程在瀏覽器中於本機執行，檔案不會上傳至伺服器。

分類
開發者工具
使用次數
在瀏覽器中
費用
免費・免註冊
可用狀態
可立即使用
玻璃擬態產生器本機處理

全程在瀏覽器中執行

毛玻璃這張卡片後方的顏色已模糊處理。

CSS

.glass {
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
}

此效果需要在元素後方放置色彩豐富的內容：backdrop-filter會模糊下方的所有內容，而半透明背景會讓這些內容透出來。-webkit-這一行適用於18之前的Safari版本。請確認玻璃效果上的文字，在背景的每個區域都保有足夠的對比度。

無障礙

有些使用者會在系統設定中開啟減少透明度。Chromium核心瀏覽器支援prefers-reduced-transparency媒體查詢，因此可以為這些使用者將玻璃效果替換成實色背景。

搭配陰影

柔和且寬廣的陰影能讓卡片從背景中浮起；請使用盒狀陰影產生器調整效果，然後替換box-shadow那一行。

使用方式

  1. 設定模糊、透明度和飽和度。
  2. 選擇色調、邊框和圓角半徑。
  3. 複製CSS，將元素放在繽紛背景上。

隱私與限制

所有操作都在您的瀏覽器中執行。

相關工具

Box ShadowCSS漸層CSS圖樣

常見問題

為什麼我的毛玻璃看起來很單調？

毛玻璃後方必須有繽紛或細節豐富的內容；放在單色背景上時，模糊效果沒有任何內容可供模糊。

backdrop-filter會很慢嗎？

它的效能成本高於大多數CSS，尤其是大範圍區域在移動內容上方捲動時；請縮小模糊區域，並避免堆疊太多模糊效果。

文字容易閱讀嗎？

請實際檢查，因為對比度會隨背景變化。使用較深的色調、更高的透明度，或加入文字陰影，都能改善可讀性。

免費工具・使用在瀏覽器中次・免註冊