玻璃擬態產生器

即時預覽玻璃擬態效果，一鍵複製 CSS 程式碼

效果設定

玻璃底色

#FFFFFF

透明度15%

模糊強度 (blur)10px

飽和度 (saturate)180%

邊框透明度30%

圓角16px

陰影強度10%

預覽背景

Live Preview

CSS

background: rgba(255, 255, 255, 0.15);
border-radius: 16px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.10);
backdrop-filter: blur(10px) saturate(180%);
-webkit-backdrop-filter: blur(10px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.30);

💡 使用提示

透明度建議 10～25%，模糊建議 5～15px，效果最佳
已自動加入 Safari 需要的 -webkit-backdrop-filter 前綴
若效果不明顯，確認父容器有彩色背景
飽和度設為 180% 可讓玻璃後的顏色更鮮豔

相似CSS 與設計

將程式碼轉成美觀的分享圖片，支援多種主題

視覺化設計線性、放射、圓錐漸層，即時複製 CSS 程式碼

開啟 →

Box Shadow 產生器

互動式調整陰影效果，即時預覽 CSS 輸出

開啟 →

💬 使用者留言

還沒有留言，搶先留下你的想法！

什麼是玻璃擬態產生器？

調整透明度、模糊、飽和度與邊框等參數，即時預覽毛玻璃（Glassmorphism）卡片效果，並複製包含 backdrop-filter 的 CSS 程式碼。

如何使用？

左側「效果設定」有 6 個滑桿（透明度、模糊強度、飽和度、邊框透明度、圓角、陰影強度）與玻璃底色選色器，全部即時反映在右側預覽卡片。
「透明度」建議設 10～25%，「模糊強度」建議 5～15px，這兩個參數最影響毛玻璃的質感。
飽和度拉高至 180% 可讓玻璃後方顏色更鮮豔；邊框透明度可為玻璃卡片加上隱約的高光邊緣。
點擊下方 6 個背景色塊（Purple／Ocean／Sunset 等）切換預覽場景，確認在不同背景下效果。
點「複製 CSS」即可取得完整 CSS，已自動加入 backdrop-filter 與 -webkit-backdrop-filter（Safari 相容），直接貼進專案使用。

常見問題

玻璃擬態效果如何實現？

使用 backdrop-filter: blur() 模糊背景、半透明 background-color 和細邊框來創造玻璃質感。

生成的 CSS 在所有瀏覽器都支援嗎？

Chrome、Edge、Safari 支援良好；Firefox 需啟用實驗功能，建議加上 -webkit- 前綴。

可以即時預覽效果嗎？

可以，調整任何滑桿或顏色時預覽區域即時更新。