玻璃擬物化產生器

建立具有背景模糊、透明度與邊框的霧面玻璃 UI 卡片，然後複製 CSS。

預覽

在鮮明背景上漂浮的霧面玻璃。

背景

CSS 輸出

—

同時輸出 backdrop-filter 與 -webkit-backdrop-filter。注意：舊版瀏覽器（例如 Firefox 103 以下）不支援 backdrop-filter；請為這些瀏覽器加上純色備援背景。

模糊

飽和度

邊角半徑

玻璃填充

透明度 20%

邊框

邊框不透明度 30%

外框陰影

品質預設

關於玻璃擬物化產生器

玻璃擬態產生器打造毛玻璃質感的卡片效果：一個會模糊背後任何內容的半透明面板。滑桿控制 backdrop-filter 的模糊與飽和度、玻璃色調與其透明度、邊框顏色與不透明度、圓角以及外陰影——每次變更都會即時渲染在鮮明的背景上，讓你能實際評估效果。

四種品質預設——輕微、霧面、鮮豔與深色玻璃——提供經過驗證的組合供你作為起點。深色預設展示了同一套配方如何適用於深色介面，其中一條淡淡的亮邊框幾乎承擔了讓玻璃與背景區隔開來的所有工作。

產生的 CSS 同時包含 backdrop-filter 以及 Safari 所需的 -webkit-backdrop-filter 前綴。請留意相容性注意事項：較舊的瀏覽器（例如 103 版之前的 Firefox）不支援 backdrop-filter，因此請為它們準備一個實色的替代背景。

面板會套用半透明的背景顏色，backdrop-filter: blur() 會模糊其背後渲染的任何內容。飽和度提升讓模糊後的色彩保持生動，而一條淡淡的半透明邊框則凸顯出玻璃的邊緣。

backdrop-filter 需要元素具有半透明背景，並且瀏覽器要支援——Firefox 直到 103 版才啟用它。Safari 需要 -webkit-backdrop-filter 前綴，產生的 CSS 已經包含此前綴。請務必定義一個實色的替代背景。

對比管理。提高模糊程度或降低透明度，直到文字在最複雜的背景下仍符合對比度準則，並加上邊框，讓卡片邊緣在明暗區域上都保持可見。

這是成本較高的 CSS 效果之一，因為瀏覽器會在內容移動時重新模糊背景。請將它用在少數幾個關鍵表面上，而非數十張堆疊的卡片，並在中階行動裝置上測試捲動表現。

是的，完全免費且以瀏覽器為基礎——無需帳號、無需上傳，即可調整滑桿並複製 CSS。