🪟 Glassmorphism CSS Generator

Glass

📐 計算公式 / 原理

玻璃擬態 = 半透明背景 + backdrop-filter: blur() + 細邊框 + 圓角 + 內高光；引數化拼裝 CSS 並即時預覽，用於現代 UI 卡片質感設計。

背景透明度 0.20

模糊強度 10px

圓角 16px

邊框透明度 0.30

陰影強度 0.10

飽和度 100%

玻璃顏色

CSS 程式碼

📚 深度解析：毛玻璃效果生成器

生成玻璃卡片

輸入：模糊 12px、透明 .15、淺描邊。處理：組合 backdrop-filter。輸出：CSS 與預覽，需底色襯托。結果以瀏覽器即時計算為準，純前端本地處理、資料不上傳；生成的樣式與程式碼僅作快速產出參考，正式專案請以設計系統、規範與瀏覽器實測為準。

為什麼不顯示模糊？: backdrop-filter 需背後有內容且瀏覽器支援；純色底看不到效果。結果以瀏覽器即時計算為準，純前端本地處理、資料不上傳；生成的樣式與程式碼僅作快速產出參考，正式專案請以設計系統、規範與瀏覽器實測為準。
生成的程式碼/圖片能直接用嗎？: 可直接複製使用，建議粘到專案後在瀏覽器實測微調；本工具只生成不託管。
會儲存或上傳我的內容嗎？: 結果以瀏覽器即時計算為準，純前端本地處理、資料不上傳；生成的樣式與程式碼僅作快速產出參考，正式專案請以設計系統、規範與瀏覽器實測為準。