Getting Started: 1. In your Bubble application, open Settings → General and enable the option to expose HTML ID attributes on elements.

2. Insert the Glassmorphism element anywhere on the page. The Glass Engine acts only as a controller and does not need to sit inside the Group or element it affects.

3. Choose the Bubble element you want to turn into glass and enter an HTML ID in the ID attribute field, for example: "glass-card"

4. Enter that same value into the Glass Engine’s Target ID property.

5. The Glass Engine will apply its material to every matching element on the page.






Styling Your Glass:
Glassmorphism is designed to work alongside Bubble’s native appearance controls.

Use Bubble itself to control:
* Background colour
* Background gradients
* Background images
* Background opacity
* Border radius
* Standard borders
* Box shadows
* Responsive layout

Use the Glass Engine to control:
* Backdrop blur
* Saturation
* Brightness
* Contrast
* Hue shift
* Frost
* Noise
* Turbulence
* Reflected-light highlights
* Optical edge lighting
* Inner glow
* Perceived glass thickness

For the clearest glass effect, use a transparent or partially transparent Bubble background so the content behind the element remains visible through the material.





Applying One Style to Multiple Elements:
A single Glass Engine can style multiple Bubble elements at once, in one set style.

Give each element the same Target ID and the Glass Engine will apply the same material settings to every matching element.

This makes it easy to maintain a consistent glass style across cards, navigation surfaces, panels, popups and other areas of your application without configuring each element separately.




Creating Multiple Glass Styles:
To use different glass materials on the same page, add another Glass Engine element and give it a different Target ID.

Each Glass Engine can then be customised independently.





Dynamic Styling
The Target ID and major material controls support Bubble dynamic expressions.

This allows you to change the glass dynamically based on:
* Conditions
* Application data
* User preferences
* Light or dark themes
* Page state
* Responsive logic
* Custom design systems




Understanding Noise and Turbulence

Noise - adds fine physical grain to the surface and is intentionally set to zero by default.
Turbulence - creates much larger organic variations across the material and is also optional.

These effects serve different purposes and can be used independently or together.




Lighting and Glass Thickness

Highlight X and Highlight Y define a virtual light-source position.

The main reflection, edge highlights and Glass Thickness lighting respond to the same virtual light source so the material remains visually coherent.

Low Glass Thickness values create subtle dimensionality, while higher values produce increasingly pronounced glass edges.





Recommended Starting Point

For a clean, subtle glass surface, start with these default values (pre-set):
* Blur Level: **12**
* Saturation Level: **112**
* Brightness Level: **101**
* Contrast Level: **100**
* Hue Shift Level: **0**
* Frost Level: **1**
* Noise Level: **0**
* Turbulence Level: **0**
* Highlight Level: **11**
* Highlight X: **12**
* Highlight Y: **5**
* Highlight Size: **55**
* Highlight Softness: **85**
* Edge Highlight: **12**
* Edge Width: **1**
* Inner Glow: **3**
* Glass Thickness: **9**

From there, adjust the material to suit your application.




Browser Note:
Glassmorphism relies on modern browser backdrop-filter functionality. For best results, test your finished glass styles across the browsers and devices your application supports.