玻璃拟态生成器(磨砂玻璃)
调整模糊、透明度和边框,直到卡片看起来像覆在背景上的玻璃。可切换背景测试,并复制 CSS。
使用方法磨砂玻璃效果
玻璃卡片背景在这张卡片后面呈现模糊效果。
广告
玻璃拟态生成器(磨砂玻璃): 用途
调整模糊、透明度、饱和度、玻璃颜色、边框和圆角。预览会把卡片放在带图形的渐变、风景图、深色背景或你自己的照片上。
生成的 CSS 包含 backdrop-filter 以及供 Safari 使用的 -webkit- 前缀,还附带一个更不透明的备用颜色,用于不支持模糊的浏览器。
使用方法
- 调整模糊、透明度和边框。
- 更换预览背景,或使用你自己的照片。
- 复制 CSS 并应用 vidro 类。
使用场景
- 玻璃背景的页头和菜单。
- 照片上的重点卡片。
- 现代风格的界面。
常见问题
为什么看不到玻璃效果?
只有卡片后面有色彩或细节(照片、渐变或图形)时才能看到效果。在纯白背景上,磨砂玻璃看起来只是一张白色卡片。
会影响性能吗?
会有一点:浏览器需要对背后的内容做模糊。建议只用在少数元素上(页头、重点卡片),避免用在长列表或配置较低的手机上。
真的免费吗?
是的,100%免费。无需注册,无需订阅,不限使用次数。所有工具:Tools123是免费的。