磨砂玻璃是 Apple 发布会的光影魔术——多色光斑在背景流转,半透明的磨砂卡片浮在上面,像一层薄雾后的彩色世界。这个风格用模糊和透明创造深度,用光和影编织高级感。每一帧都可以是一张壁纸。
配色
标题 #0f172a 深墨、正文 #334155 石板灰,强调色 #818cf8 柔紫与 #06b6d4 青蓝是光斑的两种颜色。背景 linear-gradient(140deg, #c7d2fe 0%, #e0e7ff 45%, #cffafe 100%) 是薰衣草到浅青的三段渐变,如光斑的底色。卡片 rgba(255,255,255,0.46) 高度透明的磨砂质感,边框 rgba(255,255,255,0.55) 是半透明白色描边。
排版
现代无衬线字体,细字重,标题轻盈地浮在磨砂卡片上。正文保持简洁,字号不过大。文字与磨砂背景的对比靠 backdrop-filter 而非纯色底。
布局
磨砂卡片浮在多色渐变上,backdrop-filter: blur 创造深度感。卡片之间可以有重叠,增加层次。大圆角和柔和阴影保持轻盈感。
动画
blur-in、shimmer-sweep、gradient-flow
适合场景
Apple 式产品发布、高端品牌展示、设计系统介绍、产品特性亮点——需要传递「高级感不需要解释」的场合。
配图
不支持配图。
不要
- 不要使用实色背景或硬边框
- 不要丢掉磨砂模糊的核心效果
- 不要让卡片变得不透明
- 不要用过多的内容填满磨砂的呼吸空间