ZH
PortuguêsEnglishEspañolDeutschFrançaisItaliano日本語Русский中文
首页 收藏
Voltar

玻璃拟态生成器(磨砂玻璃)

调整模糊、透明度和边框,直到卡片看起来像覆在背景上的玻璃。可切换背景测试,并复制 CSS。

使用方法

磨砂玻璃效果

玻璃卡片背景在这张卡片后面呈现模糊效果。

可用语言: PortuguêsEspañolEnglishDeutschFrançaisItaliano日本語Русский中文

下一个工具CSS 渐变生成器→
广告

玻璃拟态生成器(磨砂玻璃): 用途

调整模糊、透明度、饱和度、玻璃颜色、边框和圆角。预览会把卡片放在带图形的渐变、风景图、深色背景或你自己的照片上。

生成的 CSS 包含 backdrop-filter 以及供 Safari 使用的 -webkit- 前缀,还附带一个更不透明的备用颜色,用于不支持模糊的浏览器。

使用方法

  1. 调整模糊、透明度和边框。
  2. 更换预览背景,或使用你自己的照片。
  3. 复制 CSS 并应用 vidro 类。

使用场景

  • 玻璃背景的页头和菜单。
  • 照片上的重点卡片。
  • 现代风格的界面。

常见问题

为什么看不到玻璃效果?

只有卡片后面有色彩或细节(照片、渐变或图形)时才能看到效果。在纯白背景上,磨砂玻璃看起来只是一张白色卡片。

会影响性能吗?

会有一点:浏览器需要对背后的内容做模糊。建议只用在少数元素上(页头、重点卡片),避免用在长列表或配置较低的手机上。

真的免费吗?

是的,100%免费。无需注册,无需订阅,不限使用次数。所有工具:Tools123是免费的。

相似工具

非常感谢您的支持!

每一笔捐赠都有助于维持网站运行。这些工具旨在帮助您,但我们有服务器开销。如果您愿意支持,将不胜感激!请选择或输入金额:

通过Stripe安全支付。将在新标签页打开。

工具按现状提供,不作任何保证。我们不对结果及其使用承担责任。