Quick answer: The frosted-glass look — a blurred, semi-transparent panel that shows the background through it — is one CSS property, backdrop-filter: blur(), on a section with a see-through background. Add a class to any Elementor section and paste the CSS below.
What this does
Glassmorphism blurs whatever sits behind an element, not the element itself. That is what backdrop-filter does. Combined with a low-opacity background colour, it produces the frosted panel you see over hero images and cards. It only looks like glass when there is something behind it to blur, so use it over an image or a coloured background, not a plain white one.
The code
Add the class bpers-glass to any Elementor section (Advanced → CSS Classes), then add this CSS. The first version is the minimal effect; the second adds a subtle border for more definition — use whichever suits the design.
.bpers-glass{
backdrop-filter: blur(24px);
background: rgba(255, 255, 255, .08);
}
OR
.bpers-glass{
backdrop-filter: blur(8.5px);
-webkit-backdrop-filter: blur(8.5px);
border: 1px solid rgba(250, 178, 165, 0.3);
}Where to add it
Put it in Appearance → Customize → Additional CSS, or in the section’s own Advanced → Custom CSS if you only want it here. The class on the section is what connects the two.
Browser support and gotchas
- It needs something behind it. Over a solid, flat background there is nothing to blur and the effect disappears. Place the section over an image or gradient.
- Safari needs the prefix. The second version includes
-webkit-backdrop-filterfor exactly this reason — without it the blur is ignored on iOS and Safari. - Keep the background opacity low (the
.08value). Too high and it stops reading as glass.
If you want to dial in the exact blur, opacity, and border, css.glass generates the values visually and you paste them into the class.
How to undo it
Remove the CSS, or just remove the bpers-glass class from the section. The section returns to its normal background instantly.