本文目录
什么是玻璃拟态，以及它为何有效
玻璃拟态（Glassmorphism）是一种围绕磨砂玻璃表面构建的 UI 设计趋势，它会对面板背后的背景进行模糊处理。通过在色彩丰富的背景上叠加半透明面板，这种效果营造出层次感和纵深感，让界面显得现代而精致。苹果在 macOS 和 iOS 中让这种美学风格广为流行，此后它便成为网页仪表盘设计、卡片布局和模态遮罩层中的常客。
玻璃拟态背后的 CSS 将半透明的背景色、backdrop-filter 模糊以及一条细微的边框结合起来，用以模拟玻璃的边缘。要在透明度、模糊半径和边框不透明度之间取得恰到好处的平衡，需要反复尝试。可视化生成器让你能够实时调节这些属性，并在效果满意时复制精确的 CSS，从而免去手写数值反复试错的麻烦。
如何使用 CSS 玻璃拟态生成器
CheckTown 的生成器为每一项玻璃效果属性都提供了交互式控件，让你可以直观地设计出完美的面板。
- 调整模糊半径滑块，控制背景被模糊的程度——数值越大，磨砂感越强；数值越小，背景越能部分透出
- 用不透明度滑块设置背景透明度——它决定了背景色能透过玻璃表面显现多少
- 微调边框的不透明度和饱和度，为面板添加一条能捕捉光线的细微玻璃边缘，让面板从背景中分离出来
- 一键复制生成的 CSS，直接粘贴到你的样式表中——输出中包含带有浏览器前缀的 backdrop-filter 属性，以获得最大程度的浏览器兼容性
免费试用 —— 无需注册
打开玻璃拟态生成器 →使用玻璃效果的设计技巧
玻璃拟态若运用得当会非常惊艳，但遵循几条准则可以避免它损害可读性或可访问性。
- 确保文字与玻璃表面之间有足够的对比度——如果透明度过高，被模糊的背景会让浅色文字难以辨认。请用 WCAG 对比度检查工具进行测试。
- 克制地使用玻璃拟态——每屏一到两个玻璃面板即可营造出优雅的视觉焦点。若对每个元素都应用该效果，界面会显得杂乱且拖慢观感。
- 为不支持 backdrop-filter 的浏览器提供纯色回退方案——较旧的浏览器会显示一个没有模糊的完全透明面板，若没有回退背景，可能导致内容无法阅读
常见问题
哪些浏览器支持 backdrop-filter？
backdrop-filter 在所有现代浏览器中都受支持，包括 Chrome、Firefox、Safari 和 Edge。生成的 CSS 包含用于 Safari 兼容的 -webkit- 前缀。Internet Explorer 不支持该属性，但它的全球使用份额已可忽略不计。
玻璃拟态会影响性能吗？
backdrop-filter 属性会触发 GPU 合成，在低端设备上或同时应用于大量元素时可能影响性能。为获得最佳效果，请将玻璃效果限制在导航栏、模态框或主视觉卡片等少数关键 UI 元素上，而不要在页面的每个组件上都应用。
我可以在深色模式下使用玻璃拟态吗？
当然可以。玻璃拟态在浅色和深色主题下都表现良好。对于深色模式，请使用更深的半透明背景色，并略微增大模糊半径，以保持磨砂效果。生成器允许你在任意背景色下预览结果，从而为两种主题都微调出理想的观感。