Introduction

Background Blur applies to structural UI surfaces. It is currently available on the TabBar and the More menu, with more surfaces to come.

On iOS, it uses system materials whenever available, so the surface adapts to light and dark mode, increased contrast, the content underneath, scroll edge transitions and the surrounding context.

On PWA and Android, it reproduces the same perceptual intensity through platform-specific blur and tint approximations.

Available on iOS, PWA and Android.

Blur intensity follows iOS material levels; on PWA and Android, those materials are adapted or simulated for a comparable result. Two modes are available: Uniform (constant density) and Progressive (density increases from bottom to top). A Visual Style option switches between Light and Dark, matching system material behavior.

JSON

{
"type": "uniform | progressive",
"material": "ultraThinMaterial | thinMaterial | regularMaterial | thickMaterial | chromeMaterial",
"style": "light | dark",
"endPoint": { // Used only for progressive
"x": FLOAT, // Between 0 & 1,
"y": FLOAT // Between 0 & 1
 },
"startPoint": { // Used only for progressive
"x": FLOAT, // Between 0 & 1,
"y": FLOAT // Between 0 & 1
 }
}

Properties

• type: the blur mode. uniform keeps a constant density; progressive increases it from bottom to top.
• material: sets the blur intensity and tint, based on iOS system materials, from lightest to densest: ultraThinMaterial, thinMaterial, regularMaterial, thickMaterial, chromeMaterial. On PWA and Android, the closest approximation is applied.
• style: the visual style, matching system material behavior: light or dark.
• startPoint (progressive only): where the blur starts, as x and y between 0 and 1. A bottom-to-top blur starts at y: 0.
• endPoint (progressive only): where the blur reaches full intensity, as x and y between 0 and 1. A bottom-to-top blur ends at y: 1.