QUICK START
Before using Glassmorphism, enable HTML ID attributes in:

Settings → General → Expose the option to add an ID attribute to HTML elements

Add the Glass Engine anywhere on your page.

On the Bubble group you want to style:

✦ enter an ID in the group's ID attribute field
✦ for example: glass-card

Then enter the same value in the Glass Engine's Target ID.

The Glass Engine does not need to sit inside the group it affects.

───────────────────────────

YOUR GROUP REMAINS A NORMAL BUBBLE GROUP

Glassmorphism handles the optical material only.

Continue using Bubble to control:

✦ background colour
✦ gradients
✦ background images
✦ transparency
✦ borders
✦ corner radius
✦ shadows
✦ responsive layout

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

───────────────────────────

TARGETING MULTIPLE GROUPS

One Glass Engine can style multiple groups in one matching material.

Give each target group the same ID used in the Glass Engine's Target ID.

All matching groups will receive the same glass settings.

To create another glass style on the same page:

✦ add another Glass Engine
✦ use a different Target ID
✦ configure that material independently

───────────────────────────

BACKDROP CONTROLS

Blur Level
Controls how strongly the content behind the group is diffused.

Saturation Level
Controls the colour intensity visible through the glass.

Brightness Level
Lightens or darkens the backdrop.

Contrast Level
Adjusts the difference between light and dark areas behind the glass.

Hue Shift
Rotates the colours visible through the material.

───────────────────────────

FROST, NOISE & TURBULENCE

Frost adds a soft cloudy haze independently of backdrop blur.

Noise adds fine surface grain.

Noise Scale changes the size of that grain, while Noise Seed generates a different pattern.

Turbulence creates larger organic variations across the material.

Turbulence Scale controls the size of those variations, Detail controls their complexity and Seed generates another pattern.

Noise and Turbulence both default to 0 and can be used independently.

───────────────────────────

LIGHTING & THICKNESS

Highlight Level controls the strength of the main reflected light.

Highlight X and Highlight Y position the virtual light source across the glass.

Highlight Size controls how far that reflection spreads.

Highlight Softness controls how gradually it fades.

Edge Highlight controls how strongly the glass edges catch the same virtual light.

Edge Width controls the fine optical rim.

Inner Glow adds subtle internal light scattering.

Glass Thickness controls perceived optical depth through directional edge lighting and opposing shadows.

───────────────────────────

DYNAMIC MATERIALS

The main Glass Engine properties accept Bubble dynamic values.

This means you can connect them to:

✦ sliders and other controls
✦ conditions
✦ custom states
✦ user preferences
✦ application data
✦ light and dark themes

Changing those values updates the glass material dynamically.

───────────────────────────

DEFAULT CLEAR GLASS

The plugin loads with a restrained clear-glass material.

Current defaults:

✦ Blur: 12
✦ Saturation: 112
✦ Brightness: 101
✦ Contrast: 100
✦ Hue Shift: 0
✦ Frost: 1
✦ Noise: 0
✦ Turbulence: 0
✦ Highlight: 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

Use these as a starting point and adjust the material to suit your interface.

───────────────────────────

BROWSER SUPPORT

Glassmorphism uses modern browser backdrop-filter functionality.

Test your finished material across the browsers and devices supported by your Bubble app, particularly when using more extreme material settings.