玻璃拟态卡片 3 款（毛玻璃/发光描边/极光光晕 CSS 源码）

效果演示（真实可交互）

下方彩色渐变背景上并排 3 张玻璃卡片：经典毛玻璃、描边发光玻璃、极光光晕玻璃，悬停均有轻微上浮反馈。

完整代码

HTML 结构：舞台容器放彩色渐变背景，卡片为兄弟元素叠在其上：

<div class="glass-stage">
  <div class="stage-bg"></div>
  <div class="glass-card g-basic">…内容…</div>
  <div class="glass-card g-border">…内容…</div>
  <div class="glass-card g-aurora">…内容…</div>
</div>

核心 CSS：

.stage-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 15% 20%, rgba(108,140,255,.55), transparent 45%),
    radial-gradient(circle at 85% 30%, rgba(179,136,255,.55), transparent 45%),
    linear-gradient(135deg, #10131c, #1b2130);
}
.glass-card {
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);   /* Safari 前缀 */
  background: rgba(255, 255, 255, .08);  /* 半透明白 */
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 16px;
  transition: transform .3s ease, box-shadow .3s ease;
}
.glass-card:hover { transform: translateY(-6px); }

/* ② 高光描边：顶部 1px 白色内高光模拟受光边 */
.g-border {
  background: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 8px 24px rgba(0, 0, 0, .25);
}

/* ③ 极光光晕：内部渐变光晕 + 外发光 */
.g-aurora {
  background:
    radial-gradient(circle at 30% 10%, rgba(108,140,255,.35), transparent 55%),
    rgba(255, 255, 255, .08);
  box-shadow: 0 0 0 1px rgba(179,136,255,.4), 0 8px 30px rgba(179,136,255,.2);
}

参数说明

兼容性与性能

• backdrop-filter 需 Chrome 76+ / Safari 9+（需 -webkit- 前缀）/ Firefox 103+，老 Firefox 无效果但卡片仍可读
• 模糊是较重的渲染操作，页面中玻璃卡片建议控制在个位数，并避免多层玻璃嵌套
• 玻璃效果依赖背后有内容，背景纯色时效果不明显，建议搭配渐变或图片背景使用
• 低端移动设备上大范围 backdrop-filter 可能掉帧，可适当降低模糊半径

常见问题

Q: Safari 上没效果怎么办？ 确认写了 -webkit-backdrop-filter 前缀，且背景容器与卡片是兄弟层级而不是嵌套在卡片内部。

Q: 文字看不清怎么办？ 提高玻璃底色透明度（如 .12），或给文字加深颜色、加轻量文字阴影增强对比度。

Q: 玻璃卡片后面是图片，性能会差吗？ 会稍微增加合成压力，建议对舞台区域做 will-change: transform 或限制模糊范围，避免整页大范围模糊。

Q: 可以商用吗？ 可以，粤喵自研原创组件，免费商用无需署名。