基础毛玻璃
使用 backdrop-filter 和半透明背景创建经典的毛玻璃效果。
适合用于卡片、模态框和导航栏。
了解更多
渐变毛玻璃
结合渐变背景和毛玻璃效果，创造更丰富的视觉层次。
渐变可以增强深度感和现代感。
查看效果
彩虹毛玻璃
使用多彩渐变背景的毛玻璃效果，营造活泼有趣的氛围。
适合用于创意和艺术类应用。
体验彩虹
发光毛玻璃
添加发光效果的毛玻璃卡片，在暗色背景下特别突出。
发光效果可以引导用户注意力。
感受光芒
交互式控制
实时调整毛玻璃效果的参数，体验不同的视觉效果。
CSS 代码
查看实现毛玻璃效果的核心 CSS 代码。
.glass-card {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 20px;
}
💡 实现原理
/* 毛玻璃效果的核心属性 */
.glassmorphism {
/* 半透明背景 */
background: rgba(255, 255, 255, 0.1);
/* 毛玻璃模糊效果 */
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
/* 边框增强效果 */
border: 1px solid rgba(255, 255, 255, 0.2);
/* 阴影增强层次 */
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
/* 内阴影增强玻璃感 */
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
}