EB Liquid Glass Effect extension helps you design glassmorphism effects right inside your Gutenberg editor. This extension lets you apply stunning Liquid Glass Effects that respond to infoboxes, buttons and more, making your web pages feel dynamic and interactive while captivating your visitors’ attention.

How to Find the EB Liquid Glass Effect? #

First, add a wrapper to add the background for the liquid glass effects. Then, inside the wrapper, add the block of Essential Blocks in which you want to add this effect. For tutorial purposes, we are using the Infobox block. Click on the block and move to the ‘Advanced’ tab of the block’s settings panel to configure liquid glass effects. In the ‘Advanced’ tab, scroll to the ‘Liquid Glass Effect’ dropdown and toggle it on to enable the effect for this block.

Once you have enabled the ‘Liquid Glass Effect’ extension, you can see all the configuration options under this dropdown. This extension offers different presets and effects along with customization options to add visually appealing effects to your website page.

How to Configure the ‘Liquid Glass Effect’? #

In the ‘Liquid Glass Effect’, there are five different presets available: Heavy Frost, Soft Mist, Light Frost, Grain Frost and Fine Frost. Each of these presets shows different types of glass effects on the block.

Note: Some of these presets are premium. To use those presets, make sure you have installed & activated the Essential Blocks Pro plugin.

With presets here, there are different options available to customize the background color or adjust the backdrop filter for the effects.

Add And Customize Shadow Effects #

You can also add different shadow effects to the liquid glass. There are 4 different shadow effects available. For every effect, you can choose a different border style, color, radius and shadow.

Configure Liquid Glass Effect on the Button #

Liquid Glass Effects is also available on the button. To configure that, go to the ‘General’ tab and from there click on the dropdown of the ‘Button’ option. There, you will find the ‘Liquid Glass Effect’ option. Toggle the button to enable it and the effect will be implemented. 

To style the effects on the button, go to the ‘Style’ tab and then scroll down to ‘Button Liquid Glass’. Click on the dropdown and there you will find all the options to customize the Liquid Glass Effect.

Now, here you can find all the options to add presets and effects. You can also customize the button presets and effects available for the button on your infobox.

Final Outcome #

This is how you can show your website content beautifully with EB Liquid Glass Effect. This effect lets you style and add glass effects in Gutenberg the way you prefer.

By following these steps, you can easily add a glass-like effect to your website using EB Liquid Glass Effect. 

Getting stuck? Feel free to Contact Our Support for further assistance.