How to set up and style the Glass Effect extension in Elementor.
Glass Effect turns a widget, container, section or column into frosted glass. What is behind the element is blurred, and the element gets a light tint, a thin bright border, a shine on the top edge and a soft shadow. Use it for cards, menus and boxes that sit over an image or a gradient.
Part of: Bright Addons Pro.
These options are in the Advanced tab of the element.
| Option | What it does |
|---|---|
| Glass Effect | Switches the glass look on for this element. |
| Blur | How strongly the content behind the element is blurred. The default is 12 px. |
| Color Strength | The saturation of what shows through the glass. The default is 140 percent. |
| Tint | The color of the glass itself. Use a see-through color. |
| Border Color | The color of the thin border. |
| Border Width | The width of the border, from 0 to 8 px. The default is 1 px. |
| Border Radius | Rounds the corners, per device. |
| Shine on the Top Edge | Yes or No: a bright line along the inside of the top edge. |
| Shadow Color | The color of the soft shadow under the element. |
One license gives you every Pro widget, all 10 extensions, the Theme Builder and priority support. From $18 a year, with a 14-day money-back guarantee.
There is probably nothing behind it, or the Tint is fully solid. Put the element over an image or gradient and use a see-through tint.
Yes. Glass Effect works on every widget, container, section and column.
No. The look is written into the stylesheet of the page and uses CSS only.
Check the troubleshooting guide, or contact support with the page address and what you expected to happen.
Troubleshooting guide