Blur and Gradient Overlays (Mobile) is designed for glass cards, navigation bars, modals, buttons, splash visuals, hero surfaces, and custom mobile interfaces. Use it as a visible visual layer or as a reusable dynamic surface controlled by Bubble workflows.
## Demo App Editor

A configured mobile test view is available for reviewing the element setup, actions, states, effects, and workflow controls.

**Bubble Editor Test App:**
https://bubble.io/page?id=ankhsmobile&app_type=mobile&tab=Design&name=Blur+and+Gradient+Overlays&version=live&type=page

The test view is named **Blur and Gradient Overlays**. It includes effect modes, blur intensity, visibility, cross-fade, gradient rotation, reset, liquid-glass, shimmer, and preset examples.

## Quick Setup

1. Place BlurGradientOverlay on a mobile page and size it in Bubble's Layout tab.
2. Choose Effect - Render mode: both, gradient, blur, or tint.
3. Configure Color, Theme, Style, Animation, Accessibility, and Behavior fields as needed.
4. Put child elements inside the overlay to render them above the visual layers.

## Effects and Dynamic Values

Use dynamic expressions for colors, intensity, opacity, angles, images, masks, glass controls, and animation timings. Optional values can be left blank; the plugin uses safe defaults. Set Gradient stop positions only when you need manual color placement.

For Android, the plugin enables the available native blur path and keeps a frosted fallback surface for devices that cannot sample the backdrop. Test final visual treatment on a real Android device.

## Important Workflow Actions

* Set blur intensity
* Set effect mode
* Set gradient and gradient opacity
* Set tint color
* Show, hide, or toggle overlay
* Pulse, cross-fade, rotate gradient, shimmer, and breathing controls
* Enable or disable liquid glass
* Apply a preset
* Set glass control
* Reset or stop all animations

## Useful States and Events

Read current effect, intensity, gradient, visibility, animation, liquid-glass controls, recommended text color, and error states in dynamic expressions. Use events for presses, mode changes, animation completion, visibility changes, theme changes, and errors.

## Device Test Checklist

Before publishing, test blur and the frosted fallback on iOS and Android, reduced motion, reduced transparency, background images, masks, all animation actions, dynamic values, and invalid color or image inputs.

Built with 🤍 by ANKHARA Studios.