Glass Effect

Demo Link: https://chakor-plugin-demo-6.bubbleapps.io/version-test/glass_effect

Editor Link: https://bubble.io/page?id=chakor-plugin-demo-6&test_plugin=1736774972388x495751876063526900_current&tab=Design&name=glass_effect&type=page

The Glass Effect Plugin allows you to effortlessly add a frosted glass aesthetic to your Bubble app elements. Customize blur intensity, background transparency, border styles, and corner radius to create sleek, modern designs. Enhance your UI by applying this visually appealing effect to groups or elements, making your app look polished and professional. Perfect for dashboards, cards, overlays, or any area where a glass-like appearance is desired!

1. Install the Plugin in Your Bubble App
   • 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.
     
   
   


2. 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.
     
   
   


3. 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).