VISUAL MATERIAL / FROSTED SURFACE

把背景留在场内，让界面浮起来。

用一张图片或一块纯色，调出刚刚好的透明、模糊与边缘高光。所有参数都会即时映射到右侧的 CSS。

01 / LIVE CANVAS

效果预览

DESKTOP · 16:10

LIQUID GLASS · MATERIAL PREVIEW

当前材质 Liquid Glass · web study BACKDROP-FILTER: 24px

02 / CONTROL ROOM

06 CONTROLS

决定玻璃下方的内容

选择一组背景，观察玻璃层如何保留色彩关系。

背景色

#5369A0

纯色更适合测试玻璃本身的透明度与边缘。

上传一张本地图片JPG / PNG / WEBP · 建议横向图片

图片只在当前浏览器预览，不会上传到服务器。

基于 backdrop-filter

模糊 Blur28

透明度 Opacity20%

饱和度 Saturation145%

边缘 Border38%

圆角 Radius34

边缘光 Edge glow68%

复制到你的项目

backdrop-filter: blur(24px) saturate(135%);