CSS 玻璃拟态与毛玻璃生成器 (Glassmorphism Studio)
可视化调配现代毛玻璃视觉特效：精准控制背景模糊、半透明度、饱和度增强、高光边缘与环境漫反射阴影，支持卡片拖拽与一键导出 CSS / Tailwind 代码。
// 1. 核心毛玻璃参数 (Glass Controls)
背景模糊度 (Blur):
{{ params.blur }}px
背景不透明度 (Opacity):
{{ params.opacity.toFixed(2) }}
色彩饱和度 (Saturate):
{{ params.saturate }}%
玻璃材质基色:
// 2. 边框与阴影光效 (Edge & Shadow)
高光边框厚度 (Border):
{{ params.borderWidth }}px
边框透光度 (Border Opacity):
{{ params.borderOpacity.toFixed(2) }}
圆角半径 (Border Radius):
{{ params.radius }}px
阴影模糊扩散 (Shadow Blur):
{{ params.shadowBlur }}px
// 经典玻璃拟态预设 (Presets)
{{ preset.name }}
{{ preset.tag }}
// 舞台背景:
网格流光
赛博霓虹
落日晚霞
极地冰光
// 卡片组件:
银行卡
音乐播放器
个人名片
ANTIGRAVITY VIP
VISA Platinum
4288 •••• •••• 8866
CARDHOLDER: ALEX SHEN
EXP: 08/29
🎵
Midnight Cyber City
Synthwave Collective
02:18
03:45
👨💻
Alex Chen
Senior Frontend Architect
{{ pureCssCode }}
{{ tailwindCode }}
🔍 什么是 Backdrop-filter？
CSS `backdrop-filter` 能够直接对元素背后的图层应用高斯模糊与饱和度调整，无需像传统方案那样克隆背景图，渲染性能极高且支持动态内容。
🍎 Safari 浏览器兼容性前缀
在 WebKit 内核 (Safari / iOS 浏览器) 中，必须声明 `-webkit-backdrop-filter: blur(...)` 才能生效，本工具生成的 CSS 已自动内置该前缀。
✨ 打造通透毛玻璃三要素
1. 足够的背景模糊 (12~24px)；2. 低透明度背景 (rgba 0.1~0.3)；3. 细高光半透明边框 (1px border-white/20) 强化立体边缘感。