CARD
毛玻璃卡片Glassmorphism Card
半透明白底 + 背景模糊 + 1px 白描边，卡片像一块真正的磨砂玻璃浮在彩色背景上。
效果预览
季度报告已生成
较上季度增长 24.6%，新增用户 3,204。
适合用在哪
深色或彩色 Hero 上的悬浮信息卡、功能浮层、音乐播放器。
容易踩的坑
- 放在纯白或单色背景上，模糊后什么都看不到，玻璃感完全消失。
- 同屏超过 5 个 backdrop-filter 元素且有滚动，低端设备 GPU 负载过高明显卡顿。
- 背景光斑移动到卡片下方时局部变亮，白字对比度跌破 4.5:1。
设计提示词 · Prompt
毛玻璃卡片（Glassmorphism Card）：background:rgba(255,255,255,.15-.2)、backdrop-filter:blur(16-24px) saturate(1.6)、border:1px solid rgba(255,255,255,.3)、圆角 16-24px、文字纯白、再叠一道内高光（inset 0 1px 0 rgba(255,255,255,.25)）。玻璃卡必须放在彩色/有层次的背景上才成立——背景至少要 2-3 个不同颜色的模糊光斑。整卡透明度不超过 25%，保证文字对比度。
Glassmorphism Card: background:rgba(255,255,255,.15-.2), backdrop-filter:blur(16-24px) saturate(1.6), border:1px solid rgba(255,255,255,.3), 16-24px radius, pure white text, plus an inner highlight (inset 0 1px 0 rgba(255,255,255,.25)). A glass card only works on a colorful/layered background — the background needs at least 2-3 blurred blobs of different colors. Keep the card's overall opacity no higher than 25% to ensure text contrast.
常见搭配
同一页面里经常和「毛玻璃卡片」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s d-glass">
<div class="d-glass__blob d-glass__blob--1"></div>
<div class="d-glass__blob d-glass__blob--2"></div>
<div class="d-glass__card">
<b>季度报告已生成</b>
<span>较上季度增长 24.6%，新增用户 3,204。</span>
</div>
</div>