Open your Bubble app editor.

Navigate to the Plugins tab.

Click on Add Plugins and search for "Glass Effect."

Install the plugin into your app.



Add the Plugin Action

Go to the Workflow tab in your Bubble app editor.

Choose a trigger event (e.g., page load, button click).

Add the action "Add Glass Effect" from the plugin's actions menu.



Configure the Glass Effect Properties

In the "Add Glass Effect" action, configure the following properties:


Group ID(s): Enter the ID Attribute(s) of the element(s) or group(s) where you want to apply the glass effect. You can specify multiple groups by providing a comma-separated list of IDs (e.g., group1, group2, group3).

Background Blur: Set the intensity of the blur effect (e.g., 10 for moderate blur, 20 for heavier blur).

Background Color: Define the background color using an RGBA value (e.g., rgba(255, 255, 255, 0.5) for a semi-transparent white background).

Border Radius: Enter the radius for rounded corners (e.g., 10px, 20px, or 50% for fully circular elements).

Border Opacity: Specify the transparency of the border (e.g., 0.2).