a11y.skipToMainContent
1

CSS 玻璃形态生成器

创造出可视化的被霜玻璃外观——曲调模糊,透明,饱和,边框和阴影,再复制已制作准备的CSS.

tool.glassmorphism.presets

tool.glassmorphism.backdrop
px
%
%
%
px
%

tool.glassmorphism.preview

tool.glassmorphism.glass

tool.glassmorphism.css

Was this tool helpful?
Send output to:
Advertisement

How to use Glassmorphism Generator

  1. 选择浅色或暗色背景,然后设置模糊和饱和的量 .
  2. 选择一个填充颜色并调整其不透明性,所以背景显示会通过.
  3. 将边界不透明,角半径和可选投出阴影,直到卡片看起来正确.
  4. 点击 CSS 复制完整规则集, 包括 -webkit- backdropp- filter 倒置 .

{姓名}是什么来着?

Glassmorphism是建立在 CSS Backdrop-filter 属性上的被霜玻璃UI效应. 半透明的填充让背景显示通过,而回放-filter: 模糊 () 模糊了元素后面的任何东西, satrate () 则能为玻璃发光提升颜色。

此生成器预览了多彩梯度上的玻璃卡,因此模糊度实际可见,并输出一个完整的规则集,包括回放-filter-webkit回放-filter回放-code>回放,rgba背景,薄的半透明边框,边框-辐射和可选的软阴影.

Advertisement

FAQ

为什么我的玻璃效果看起来像平淡的颜色?
背景过滤器只会模糊元素后面的内容 。 如果你的卡片后面没有色彩或忙碌的东西,模糊的卡片就没有什么用. 将玻璃卡放入图像或生动的梯度上以看到效果.
我需要... 韦克基特回放过滤线吗?
是的,给萨法里 基于WebKit的浏览器,特别是在iOS上,仍然需要-webkit-backdrop-filter的前缀. 此生成器将自动与标准属性并列.
背景过滤器是否得到广泛支持?
它在Chrome,Edge,Firefox和Safari等所有现有版本中都有作用. 对于非常古老的浏览器来说,该元素仅显示其半透明的背景而不显示模糊,它优雅地降解.

Related tools

Author

MW
Marcus Webb"The DevTool Craftsman"

Full-Stack Developer & Tools Architect

Marcus has been writing code since the dial-up era. He has contributed to open-source developer tools, built CI/CD pipelines for startups, and debugged production incidents at 3 AM more times than he would like to admit. His philosophy is that the best developer tool is the one that gets out of your way, and he writes about practical tooling that helps teams ship faster with fewer headaches.

← Back to Developer Tools · All tags

Last updated:

Advertisement