BLACK FRIDAY: 50% OFF all Pro plans
Pro from $18 a year or $60 lifetime, no code needed
Ends Cyber Monday, 30 Nov. Lock in the price today
Get 50% Off
Pro extension

Glass Effect for Elementor Pro

Frosted glass look for any widget or container

Overview

What Glass Effect does

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.

Live demo

See it in action

Frosted glass over a gradient

Features

What it can do

  • Blur of the content behind the element, up to 40 px.

  • Color Strength setting from 50 to 250 percent for the colors seen through the glass.

  • Tint color with your own opacity.

  • Border color and border width up to 8 px.

  • Border radius in px or percent, with a separate value per screen size.

  • Optional shine on the top edge and a shadow color.

  • CSS only: no script and no extra file is loaded.

Use cases

When to use it

Card over a photo

Place a text card over a hero image and let the photo show through, blurred.

Glass header

Combine it with the Sticky extension for a see-through header that blurs the page under it.

Pricing boxes

Put pricing containers on a gradient background and give each one the glass look.

Setup

How to set it up

A few steps from adding the extension to a finished result.

  1. Place the element over an image, a gradient or other content. Glass needs something behind it.

  2. Select the element, open the Advanced tab and open the section Bright: Glass Effect.

  3. Switch on Glass Effect. The default look is applied right away.

  4. Adjust Blur and Color Strength.

  5. Pick a see-through Tint by lowering the opacity in the color picker.

  6. Set Border Color, Border Width and Border Radius, then choose Shine on the Top Edge and Shadow Color.

FAQ

Questions and answers

Why does my element look plain instead of like glass?

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.

Can I use it on a single widget?

Yes. Glass Effect works on every widget, container, section and column.

Does it add scripts to the page?

No. The look is written into the stylesheet of the page and uses CSS only.

Bright Addons Pro

Get Glass Effect with Bright Addons Pro

Bright Addons Pro has 80 Pro widgets plus all 51 free widgets, 10 extensions, a Theme Builder and 32 dynamic tags. From $18 a year, with a 14-day money-back guarantee.