Loading...
Loading...
用滑块调出毛玻璃效果,实时预览并复制 CSS。
玻璃拟态就是毛玻璃外观:一块半透明面板,把它后面的内容模糊掉,再配上柔和的边框和阴影。这个工具让你用滑块调这个效果,并复制对应的 CSS。
调节模糊、透明度、色调、圆角、边框和阴影,实时面板会在彩色背景上更新,让你真正看到模糊效果。输出包含标准的 backdrop-filter 和给 Safari 的 -webkit- 前缀版本。一切都在浏览器里运行,不上传。
调滑块时,玻璃面板在彩色背景上即时更新。
模糊、透明度、色调、圆角、边框、阴影都能调。
输出含给 Safari 的 -webkit-backdrop-filter 前缀。
在示例背景间切换,测试效果在不同颜色下的表现。
把生成的 CSS 直接复制进样式表。
玻璃只有叠在有内容的背景上才像玻璃;透明度调低(约 0.1~0.2),让模糊去发挥作用。
把模糊和透明度调到合适。
选色调、圆角,开关边框和阴影。
试试背景色块,检查对比。
把 CSS 复制进你的组件。
给浮层和面板一个现代毛玻璃表面。
半透明吸顶导航,模糊其下滚动的内容。
在照片或渐变背景上浮一块玻璃面板。
看清楚到底哪些属性产生了这个效果。
工具把每个控件映射到一条 CSS 属性,用相同的内联样式渲染实时预览,再序列化成可复制的 CSS(含 -webkit- 前缀)。
无账号、不追踪、无网络请求,全部在本地计算。
纯 CSS 输出 + 内联样式预览,更新即时。