CSS 玻璃擬態產生器
以即時預覽和 CSS 輸出建立毛玻璃 UI 效果。 精細調整透明度、模糊、邊框和陰影設定。
預覽
Glassmorphism
預覽
控制項
10px
0.25
180%
0.18
16px
#ffffff
CSS 代碼
background: rgba(255, 255, 255, 0.25);
backdrop-filter: blur(10px) saturate(180%);
-webkit-backdrop-filter: blur(10px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 16px;分享此工具
📖
使用方法
Step 1
調整參數
調整透明度、模糊和邊框
→
Step 2
預覽
即時查看玻璃效果
→
Step 3
複製
複製 CSS 代碼使用
✨
功能特色
模糊控制
調整 backdrop-filter 模糊量
背景自訂
自訂背景圖片或顏色
邊框與陰影
設定玻璃風格的邊框和陰影
❓
FAQ
一種具有毛玻璃般半透明效果的 UI 設計趨勢。
🔗相關工具
🎨
設計工具色碼換算工具
在 HEX、RGB 和 HSL 色碼之間互換。 使用顏色選擇器和即時預覽直觀選色。
🎨
設計工具色彩選擇器
使用色輪和滑桿直覺地選取顏色。 取得並複製 HEX、RGB 和 HSL 格式的色彩代碼。
🎨
設計工具圖片色彩擷取器
自動偵測圖片中的主要色彩並生成色彩調色盤。 也可以點擊圖片上的任意位置來取得個別色彩。
🎯
設計工具圖片平均色彩擷取器
計算整張圖片或選定區域的平均色彩。 適合用於選擇配色方案或縮圖背景顏色。
🌈
設計工具CSS 漸層產生器
使用拖動控制視覺化建立 CSS 漸層。 支援線性、放射狀和圓錐漸層類型及預設。
🔲
設計工具CSS 陰影產生器
使用滑桿視覺化建立 CSS box-shadow。 支援多重陰影和內陰影。