如何使用纯 CSS 创建玻璃拟态 UI 效果

苹果最新的设计趋势重新点燃了人们对玻璃拟态的兴趣,但实现这种惊艳效果的 CSS 属性却是永恒的。无论您是在构建现代化仪表板还是更新您的作品集,掌握玻璃拟态 CSS 技术都能为您的项目增添用户期待的精致、专业感。
本指南将带您从零开始创建纯 CSS 玻璃拟态效果——无需框架,无需生成器,只需掌握在项目中实现美丽磨砂玻璃效果的核心属性。
核心要点
- 掌握玻璃拟态的四个核心 CSS 属性:backdrop-filter、半透明背景、边框和阴影
- 学会平衡透明度与可访问性和可读性
- 为旧版浏览器实现优雅降级
- 优化移动端和桌面端的性能表现
玻璃拟态的核心 CSS 属性
backdrop-filter:基础属性
backdrop-filter
属性是任何玻璃拟态设计的基石。通过对元素后方的内容应用 blur()
,您可以创建出标志性的磨砂外观:
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px); /* Safari 支持 */
模糊值通常在 8px 到 15px 之间。较低的值创建细微的磨砂效果,而较高的值产生更重的扩散效果。大多数现代浏览器都支持 backdrop-filter
,包括 Chrome 76+、Safari 9+ 和 Firefox 103+。
半透明背景
玻璃拟态需要在透明度和可见性之间仔细平衡。使用低 alpha 值的 RGBA 颜色:
background: rgba(255, 255, 255, 0.1); /* 10% 白色 */
对于浅色背景,alpha 值在 0.1 到 0.25 之间效果最佳。深色主题可以处理稍高的值(0.15-0.3),而不会失去玻璃效果。
边框和阴影营造深度
细微的边框定义玻璃边缘:
border: 1px solid rgba(255, 255, 255, 0.2);
结合柔和阴影创建浮动元素:
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
逐步构建玻璃拟态卡片
基本 HTML 结构
从简单的容器和背景开始:
<div class="background">
<div class="glass-card">
<h2>Glass Card</h2>
<p>Your content here</p>
</div>
</div>
核心 CSS 实现
以下是精致卡片的完整玻璃拟态 CSS:
.glass-card {
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
border-radius: 16px;
padding: 2rem;
}
微调效果
根据您的背景调整这些值:
- 彩色渐变:使用较低的不透明度(0.1-0.15)
- 图像背景:将模糊增加到 12-15px
- 纯色:将模糊减少到 6-8px 以获得细微效果
Discover how at OpenReplay.com.
浏览器支持和降级方案
当前浏览器兼容性
浏览器 | 支持 | 版本 |
---|---|---|
Chrome | ✓ | 76+ |
Safari | ✓ | 9+ |
Firefox | ✓ | 103+ |
Edge | ✓ | 79+ |
优雅降级
始终使用 @supports
提供降级方案:
.glass-card {
/* 降级方案 */
background: rgba(255, 255, 255, 0.9);
}
@supports (backdrop-filter: blur(10px)) {
.glass-card {
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
}
可访问性和性能
确保内容可读性
纯 CSS 玻璃拟态可能会影响文本可读性。使用以下技术保持 WCAG 合规性:
-
添加文字阴影增强对比度:
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-
增加关键文本区域的背景不透明度
-
使用工具测试对比度,如 WebAIM 的对比度检查器
性能优化
backdrop-filter
属性计算成本较高。通过以下方式优化:
- 将玻璃元素限制在每个视口 2-3 个
- 避免对模糊元素进行动画处理
- 谨慎使用
will-change: backdrop-filter
- 在中端设备上进行测试
对于移动端,考虑降低模糊强度或提供替代样式。
实际应用指南
磨砂玻璃效果最适合用于:
- 导航栏和页头
- 模态框覆盖层
- 卡片组件
- 侧边栏面板
避免在以下场景使用玻璃拟态:
- 正文文本容器
- 表单输入框(除非经过仔细测试)
- 高信息密度区域
记住:细微是关键。一个精心放置的玻璃元素比整个透明界面更有冲击力。
总结
创建专业的玻璃拟态 CSS 效果只需要四个核心属性:backdrop-filter
、半透明背景、细微边框和柔和阴影。通过遵循这些指南并尊重可访问性需求,您将能够实现跨浏览器工作且保持性能的现代玻璃效果。
从单个组件开始,跨浏览器测试,始终优先考虑可读性。结果如何?仅使用纯 CSS 构建的界面将感觉精致而现代。
常见问题
Firefox 需要 103 或更高版本才能支持 backdrop-filter。对于旧版本,请使用 @supports 查询提供实体背景降级方案,在没有模糊效果的情况下保持可读性。
将玻璃拟态元素限制在每个视口 2-3 个,在移动端将模糊值降低到 6-8px,避免对带有 backdrop-filter 的元素进行动画处理。考虑使用媒体查询为低性能设备提供更简单的样式。
普通文本的最小对比度应达到 4.5:1,大文本为 3:1。当模糊效果降低对比度时,将背景不透明度增加到 0.3-0.4 或添加细微的文字阴影来改善可读性。
Truly understand users experience
See every user interaction, feel every frustration and track all hesitations with OpenReplay — the open-source digital experience platform. It can be self-hosted in minutes, giving you complete control over your customer data. . Check our GitHub repo and join the thousands of developers in our community..