Liquid Glass Pro applies an iOS-style liquid-glass effect to any group on your page — without touching your existing design. It adds only the glass (backdrop blur, saturation, tint, and edge refraction), so your own corner radius, borders, shadows, and layout stay exactly as you set them.
SETUP

1. Enable IDs once per app: Settings → General → "Expose the option to add an ID attribute to HTML elements."
2. Select the group you want to turn into glass and give it an ID Attribute (e.g. glass-card).
3. Make sure something sits behind the group — a background image or colored section. The effect blurs what's behind it, so with a plain background there's nothing to see.
4. Drop the Liquid Glass Web element anywhere on the page. It renders nothing visible.
5. Set Target Group ID to your group's ID, pick a Style, and preview.

STYLES

Clear (default), Frosted, Vibrant, Dark.

MULTIPLE GROUPS, ONE ELEMENT

Target Group ID accepts a list — separate IDs with commas:

glass-card, nav-bar, bottom-sheet

All listed groups get the same style. To use different styles, add one Liquid Glass Web element per style.

NOTES

- IDs are case-sensitive and must be unique on the page. Don't include the # symbol.
- Bind the Style field to a dynamic value (e.g. the user's theme) to switch looks at runtime.
- Keep glass to card-sized panels where you can — backdrop blur is GPU-intensive.
- Best in Chromium browsers; the refraction degrades gracefully to frosted glass elsewhere.

Demo URL:
Mobile Editor: https://bubble.io/page?id=hks-demos&app_type=mobile&tab=Design&name=Home
Mobile Preview: https://hks-demos.bubbleapps.io/version-test/api/1.1/mobile/preview?debug_mode=true&preview_view=Home

Web Editor: https://bubble.io/page?id=hks-demos&tab=Design&name=apple-liquid-glass&type=page&elements=cmORf
Web Preview: https://hks-demos.bubbleapps.io/version-test/apple-liquid-glass