磨砂玻璃:淡紫、粉色与深紫罗兰之上的棱纹玻璃渐变
在磨砂玻璃中,16 块垂直窗格折射着淡紫、柔粉和深紫罗兰的网格,呈现出把长虹玻璃举在彩色光线前的棱纹效果。玻璃设为 70,柔和度设为 60,因此每块窗格都会让后面的模糊发生偏移,并沿一侧边缘带出一道细细的高光。颗粒只有 8,让表面保持干净,更接近玻璃而不是纸张。
调出你自己的版本
改变窗格的节奏
定价卡片后面宽而平静的板条需要更少的窗格:试试 8 而不是 16。调到 30 会得到细密的棱纹质感,在卡片预览这样的小尺寸下依然清晰。
减弱折射
玻璃为 70 时,颜色会被强烈弯折。调到 35 左右,窗格只剩一点暗示,放在长文本下面更稳妥。开启比较效果,可以并排查看有玻璃和没有玻璃的网格。
常见问题
这是像 CSS backdrop-filter 那样的真实背景模糊吗?
不是。玻璃效果是直接画进渐变里的:图像被分成垂直窗格,每块窗格都会让后面的颜色发生偏移。你得到的磨砂效果是一张成品背景,页面上不需要实时模糊任何内容。
使用方法
选择起点
从柔软网格、日食光芒或 Riso 半色调等 28 种风格中任选其一开始,或者选择一种渐变类型,并搭配 24 套调色板之一。
调节渐变
调整缩放、扭曲、旋涡和柔和度,添加颗粒、玻璃面板或玻璃砖、圆点、网格或线条叠加层、混合的第二图层,或半色调、像素排序等处理效果,还可以开启动画并单独设置速度。
预览并使用
在落地页、卡片、移动端和注册页布局中查看渐变,然后登录免费的 UX Pilot 账号,即可将其用于画布或导出。