CSS 玻璃拟态生成器 (Glassmorphism)

可视化生成 CSS 玻璃拟态（Glassmorphism）效果代码。支持调整透明度、模糊度、饱和度、边框和阴影等参数，实时预览效果，一键复制 CSS 代码。

🪟

Glassmorphism

玻璃拟态效果预览

🎨 背景设置

🪟 玻璃面板设置

透明度%
px
%
px
px
透明度%

🔲 阴影 (Box Shadow)

X 偏移px
Y 偏移px
模糊px
扩散px
透明度%

📐 面板尺寸

Wpx
Hpx

预设效果

微妙玻璃
毛玻璃
暗色玻璃
彩色玻璃
高透玻璃
哑光玻璃
蓝紫玻璃
日落玻璃

CSS 代码

.glass-panel {
  /* 玻璃背景 */
  background: rgba(255, 255, 255, 0.25);
  /* 模糊与饱和度（核心） */
  backdrop-filter: blur(10px) saturate(180%);
  -webkit-backdrop-filter: blur(10px) saturate(180%);
  /* 圆角 */
  border-radius: 16px;
  /* 边框 */
  border: 1px solid rgba(255, 255, 255, 0.18);
  /* 阴影 */
  box-shadow: 0px 8px 32px 0px rgba(0, 0, 0, 0.10);
  /* 尺寸 */
  width: 300px;
  height: 200px;
}