---
metadata:
  - name: generator
    content: Diplodoc Platform v5.70.0
alternate:
  - https://divkit.tech/docs/en/concepts/extensions/blur.md
  - https://divkit.tech/docs/ru/concepts/extensions/blur.md
  - href: https://divkit.tech/docs/en/concepts/extensions/blur.md
    type: text/markdown
    title: Markdown version
  - href: https://divkit.tech/docs/en/llms.txt?revision=r22102947
    rel: describedby
---
> **Documentation Index:** Fetch the complete configuration index at https://divkit.tech/docs/en/llms.txt?revision=r22102947

# Blur effect

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

{% cut "Example" %}

```json translate=no
{
  "extensions": [
    {
      "id": "blur",
      "params": {
        "intensity": 0.5
      }
    }
  ]
}
```

{% endcut %}

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 {#params}

#|
||
**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 {#behavior}

- 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 {#connect}

```swift translate=no
DivKitComponents(
  ...
  extensionHandlers: [
    BlurExtensionHandler()
  ]
)
```

<!-- source: en/_includes/index/troubleshooting.md -->
## Learn more {#troubleshooting}

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



[DivKit Repository](https://github.com/divkit/divkit)
<!-- endsource: en/_includes/index/troubleshooting.md -->