Why is my blur effect not showing?

Turn on Fix Overflow in the Glassmorphism panel. It sets the element’s overflow to visible so backdrop-filter can work. Also make sure there is an image or a colorful background behind the element.

Can I use solid colors with glass effect?

Yes. A HEX or RGB color is converted to RGBA at 30% opacity, so the glass stays see-through. For exact control, pick an RGBA color and set the opacity yourself.

Does it work with any theme?

Yes. The effect is set on Elementor elements, so it works with any theme that runs Elementor. Visitors need a browser that supports backdrop-filter, which covers current versions of Chrome, Edge, Safari and Firefox.

Is the Glassmorphism extension free?

Yes. Glassmorphism is one of the free extensions in Master Addons for Elementor. Turn it on in the Master Addons dashboard and it shows up on the Advanced tab of every element.

自由元素玻璃化扩展:一次切换中的磨砂玻璃效应

Glassmorphism是磨砂玻璃外观:半透明面板,模糊了它后面任何东西大师插件中的免费Glassmorphism扩展将其添加到任何Elementor小部件,列,部分或容器的高级选项卡上,将其打开,设置模糊和透视背景颜色,使角落变圆,元素变成玻璃卡,它适合英雄叠加,定价卡,推荐和粘性标题。

模糊和玻璃着色控制

Blur Value从0到100px运行,从20px开始背景颜色设置玻璃的色调:选择RGBA颜色并降低其不透明度,因此后面的内容仍然显示通过。边界半径以px,%或em圆角,边界宽度添加细的,半透明的白色边缘,最高可达10px。

模糊值从 0 到 100px,默认情况下为 20px。
RGBA背景颜色为色调。一个HEX或RGB颜色转换为30%不透明度为你。
每个角的边框半径,加上 0 到 10px 的玻璃边缘。

修复模糊不显示时的溢出

CSS背景-过滤器属性中产生模煳,而溢出:隐藏是它丢失的最常见原因,Fix溢出开关将元素的溢出设置为可见,因此无需打开样式表即可修复。

Glassmorphism 面板中的一个开关,无自定义 CSS。
效果亮起但看起来没有什么模糊时使用它。
还要检查元素是否位于照片、渐变或其他繁忙的背景上。在纯白色上没有什么可模糊的。

玻璃态 CSS 与玻璃态扩展

Elementor的CSS滤镜模煳了元素本身, 包含文字一张玻璃卡需要背景滤镜代替, 只模煳了元素后面的东西, Elementor对其没有控制权, 手写,CSS长这样:

.glass-card {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
}

	手写CSS	玻璃态扩展
你在哪里设置的	自定义 CSS 字段或您的样式表	"高级"选项卡中的控件
野生动物园前缀	添加 -webkit-backdrop-filter 自己	包含
HEX 或 RGB 颜色	除非添加不透明度,否则保持坚固	转换为 30% 不透明度
被溢出阻挡的模糊:隐藏	自己找到并覆盖它	修复溢出开关
作品上	无论您的选择器针对什么目标	小部件、柱、部分和容器