Dev Tools
純前端檔案不上傳

Glassmorphism + Neumorphism 產生器

兩種現代 UI 風格一站搞定:**Glass**(毛玻璃,用 backdrop-filter)與 **Neumorphism**(柔質感,用兩層 light+dark 陰影做凸起/凹陷)。即時預覽多種背景,輸出 CSS 與 Tailwind v4 class。

風格
在彩色 / 圖片背景上加半透明 + 模糊,蘋果系統 control panel 風格。需要瀏覽器支援 backdrop-filter(Safari 14+ / Chrome 76+ / Firefox 103+)。
預覽背景
Glass card
玻璃色(rgba 帶 alpha)
邊框色
陰影
輸出格式
glass-css
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(16px) saturate(1.4);
-webkit-backdrop-filter: blur(16px) saturate(1.4);
border: 1px solid rgba(255, 255, 255, 0.25);
border-radius: 16px;
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.25);
›如何使用
  1. 上方選 Glass(毛玻璃) 或 Neumorphism(柔質感)。
  2. Glass 模式:選一個 預覽背景(照片 / 鮮豔漸層 / 深色漸層)— 毛玻璃要有底色才看得出效果。然後調 blur / 彩度 / tint(rgba 帶 alpha)/ 邊框 / 陰影。
  3. Neu 模式:選 表面色 + 拉 距離 / blur / 強度 / 圓角。強度設負值 會切換到凹陷(inset)模式。
  4. 下面 輸出 tab 切 CSS / Tailwind v4 任意 class。
Tips
  • Glass 要 backdrop-filter 支援 — Safari 14+ / Chrome 76+ / Firefox 103+ 都 OK,老瀏覽器看不到效果(但會 fallback 顯示半透明色)。
  • Neu 表面色不能是純白 / 純黑 — 演算法需要邊界值來算 light/dark 陰影,淺灰(#e0e5ec)是經典 neu 表面。
  • Glass 在深色背景 通常用 rgba(255,255,255,0.1) 左右的白色 tint;淺色背景 用 rgba(0,0,0,0.1) 黑色 tint。
  • 對標 glassmorphism.com 與 neumorphism.io — 二合一同站 是強差異化。

相關工具