CSS Glassmorphism 生成器

視覺化調整毛玻璃效果的模糊量、背景透明度、邊框與圓角,即時預覽並複製完整 CSS 程式碼。

效果設定
模糊(Backdrop Filter)
模糊
px
飽和
%
背景色
顏色
透明度
邊框
寬度
px
顏色
透明度
圓角與陰影
圓角
px
陰影
模糊
px
擴散
px
透明
預覽背景
預覽
CSS
backdrop-filter: blur(12px) saturate(180%);
-webkit-backdrop-filter: blur(12px) saturate(180%);
background: rgba(255, 255, 255, 0.15);
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.3);
box-shadow: 0 8px 32px 0px rgba(0, 0, 0, 0.2);

常見問題

什麼是 Glassmorphism(毛玻璃效果)?

Glassmorphism 是一種設計趨勢,模擬磨砂玻璃的視覺效果,主要特徵是半透明背景、backdrop-filter 模糊後方內容、細邊框與柔和陰影。常見於 iOS、macOS 的 UI 設計中。

backdrop-filter 所有瀏覽器都支援嗎?

現代主流瀏覽器(Chrome、Firefox、Safari、Edge)均已支援 backdrop-filter。為確保相容性,此工具同時輸出 -webkit-backdrop-filter(Safari 專用前綴)。在舊版 Firefox 中可能需要手動在 about:config 啟用。

saturate(飽和度)參數有什麼作用?

飽和度控制後方內容在模糊後的色彩鮮豔程度。設為 180% 以上會讓後方色彩更飽和鮮豔;設為 100% 則不改變色彩。搭配 blur 使用可讓毛玻璃效果更接近 macOS 的視覺風格。

為什麼預覽背景要用漸層色?

backdrop-filter 需要有背後的內容才能看出效果。純色背景無法展示模糊效果,因此預覽區使用漸層背景讓您能清楚看到毛玻璃的實際視覺效果。實際使用時,毛玻璃元素後方可以是圖片或其他 UI 元素。