Blur effect

To add a blur effect to an element, use the blur extension (iOS only):

Example

{
  "extensions": [
    {
      "id": "blur",
      "params": {
        "intensity": 0.5
      }
    }
  ]
}

Specify exactly one of the style and intensity parameters. If both parameters are specified, or
if neither is specified, DivKit reports a block modeling error and does not apply the blur.

Parameters

Parameters	Description
`id`	Extension ID.
`style`	Blur effect style at full system intensity. This parameter cannot be used together with `intensity`. Available values: `extra_light` — extra light `light` — light `dark` — dark `regular` — regular `prominent` — prominent `system_ultra_thin_material` — ultra thin material `system_ultra_thin_material_light` — ultra thin material (light variant) `system_ultra_thin_material_dark` — ultra thin material (dark variant) `system_thin_material` — thin material `system_thin_material_light` — thin material (light variant) `system_thin_material_dark` — thin material (dark variant) `system_material` — material `system_material_light` — material (light variant) `system_material_dark` — material (dark variant) `system_thick_material` — thick material `system_thick_material_light` — thick material (light variant) `system_thick_material_dark` — thick material (dark variant) `system_chrome_material` — chrome material `system_chrome_material_light` — chrome material (light variant) `system_chrome_material_dark` — chrome material (dark variant) `disabled` — the blur isn't applied
`intensity`	Intensity of the regular system blur in the `0...1` range. Values outside the range are clamped. This parameter cannot be used together with `style`. It controls interpolation between no blur and the regular system blur; it does not specify a blur radius. Supports expressions.

How it works

The iOS system blur styles are used.
You can choose either a system style at full intensity or the regular blur with configurable intensity.
Supports both basic styles and material styles with variants for light and dark themes.
The blur covers the whole area of the element and is displayed under its content: whatever is behind the element is blurred.

Connection

DivKitComponents(
  ...
  extensionHandlers: [
    BlurExtensionHandler()
  ]
)

Learn more

You can discuss topics of interest in the DivKit user community in Telegram: https://t.me/divkit_community_en.

DivKit Repository

Was the article helpful?

Rasterization

Liquid Glass effect