現代 UI 產生器

玻璃擬物化 (Glassmorphism) 是一種 UI 設計趨勢，藉由將背景設為半透明並套用模糊效果 (backdrop-filter: blur()) 來建立毛玻璃紋理。它被廣泛應用於 Apple 的 macOS/iOS 和 Windows Fluent Design System 中。

使用此工具，您可以一鍵套用 12 種預設樣式，並個別調整 4 種 backdrop-filter 功能：模糊、亮度、飽和度和對比。您還可以使用滑桿微調邊框、陰影和圓角，並以 CSS 或 CSS 變數格式複製程式碼。

backdrop-filter: blur()

模糊元素後方的區域。值越大，毛玻璃效果越強。這是玻璃擬物化的核心屬性。

backdrop-filter: brightness()

調整背景的亮度。預設值為 100%。200% 使其亮度加倍，而 0% 則使其全黑。

backdrop-filter: saturate()

調整背景的飽和度。預設值為 100%。0% 使其變為單色，而 200% 則使其成為過飽和的鮮豔顏色。

backdrop-filter: contrast()

調整背景的對比。預設值為 100%。增加數值會強調亮與暗之間的差異。

供應商前綴

建議加入 -webkit-backdrop-filter 以支援 Safari。此工具的輸出程式碼已自動包含。

Q. 所有瀏覽器都支援 backdrop-filter 嗎？

A. 支援 Chrome、Edge、Safari 和 Firefox 等主流瀏覽器的最新版本。不支援 IE11，但建議使用僅包含半透明背景顏色的備用設計。

Q. 新擬物化 (Neumorphism) 和玻璃擬物化 (Glassmorphism) 有什麼區別？

A. 玻璃擬物化使用 backdrop-filter 建立「毛玻璃」效果，表示元素重疊（Z 軸）。新擬物化使用 box-shadow 的亮暗來表示「凸起和凹陷」。

Q. 會影響效能嗎？

A. 由於 backdrop-filter 使用 GPU 合成，適度使用是沒問題的。但是，如果將高模糊值應用於整個頁面，可能會導致幀率下降。

Q. 我可以直接使用產生的程式碼嗎？

A. 可以。只需將複製的 CSS 貼上到您的樣式表中即可套用。您可以根據需要更改類別名稱。