彩色背景上的磨砂半透明卡片，高级感拉满
← 返回 卡片 类特效列表backdrop-filter: blur 毛玻璃
上方为纯 CSS 实时演示，直接将鼠标移上去 / 点击感受效果
.fx .gBg{padding:56px 0;text-align:center;background:linear-gradient(135deg,#f778ba,#4a9eff 55%,#57ab5a)}
.fx .glass{display:inline-block;width:280px;padding:32px 20px;border-radius:18px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.35);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 12px 30px rgba(0,0,0,.15);color:#fff}
.fx .glass h3{margin:0 0 8px}
.fx .glass p{margin:0;font-size:13px;opacity:.85}<div class="fx">
<div class="gBg"><div class="glass"><h3>玻璃拟态卡片</h3><p>backdrop-filter: blur 毛玻璃</p></div></div>
</div>