Liquid Glass effect

To add the Liquid Glass effect to the element, use the liquid_glass extension (iOS only):

{
  "extensions": [
    {
      "id": "liquid_glass",
      "params": {
        "style": "regular",
        "is_interactive": true,
        "tint_color": "#80FF1744",
        "corner_style": {
          "type": "capsule",
          "max_radius": 16
        },
        "ui_style_variable": "ui_style"
      }
    }
  ]
}

The extension works on iOS 26 and later. On earlier versions, the element is rendered without the effect and the layout stays the same.

Parameters

Parameters	Description
`id`	Extension ID.
`is_enabled`	Enables the effect. If set to `false`, the element is rendered without it, and its size and position stay the same. Useful for toggling the effect with an expression. By default: `true`.
`style`	Required parameter. Effect style. Available values: `regular`: Regular glass. `clear`: Clear glass.
`is_interactive`	Enables the interactive behavior of the effect: the glass reacts to a press. Optional parameter.
`tint_color`	Tint color applied to the effect. Optional parameter.
`corner_style`	Corner rounding of the effect. Optional parameter. If omitted, the system chooses the rounding. Available values of the `type` parameter: `capsule`: Corners are rounded into a capsule and scale with the element size. The optional `max_radius` parameter clamps the radius. `corners`: Fixed radii set by the optional `top_left`, `top_right`, `bottom_left`, and `bottom_right` parameters. A corner without a radius isn't rounded.
`ui_style_variable`	Name of the variable that `light` or `dark` is written to. Optional parameter. The effect resolves the interface style from the content beneath it, so this style may differ from the style of the card. Use the variable to adjust the color of the content placed on top of the glass.

How it works

The effect is displayed under the element, so the background of the element itself is drawn on top of the effect. Don't set an opaque background on the element.
All parameters support expressions, including is_enabled and style.
If style is missing or has an invalid value, DivKit reports a block modeling error and doesn't apply the effect.

Connection

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

Example

Card with several variants of the effect

{
  "templates": {
    "glass_label": {
      "type": "text",
      "font_size": 15,
      "font_weight": "medium",
      "text_alignment_horizontal": "center",
      "text_color": "#FFFFFFFF",
      "width": {
        "type": "match_parent"
      }
    }
  },
  "card": {
    "log_id": "liquid_glass_sample",
    "variables": [
      {
        "name": "is_enabled",
        "type": "boolean",
        "value": true
      },
      {
        "name": "ui_style",
        "type": "string",
        "value": "unknown"
      }
    ],
    "states": [
      {
        "state_id": 0,
        "div": {
          "type": "container",
          "orientation": "vertical",
          "height": {
            "type": "match_parent"
          },
          "paddings": {
            "left": 16,
            "right": 16,
            "top": 24,
            "bottom": 24
          },
          "background": [
            {
              "type": "gradient",
              "angle": 45,
              "colors": [
                "#FFFF3D00",
                "#FF00E676",
                "#FF2979FF"
              ]
            }
          ],
          "items": [
            {
              "type": "container",
              "orientation": "vertical",
              "content_alignment_vertical": "center",
              "height": {
                "type": "fixed",
                "value": 56
              },
              "margins": {
                "bottom": 16
              },
              "paddings": {
                "left": 20,
                "right": 20
              },
              "items": [
                {
                  "type": "glass_label",
                  "text": "clear + tint_color"
                }
              ],
              "extensions": [
                {
                  "id": "liquid_glass",
                  "params": {
                    "style": "clear",
                    "tint_color": "#80FF1744",
                    "corner_style": {
                      "type": "capsule",
                      "max_radius": 16
                    }
                  }
                }
              ]
            },
            {
              "type": "container",
              "orientation": "vertical",
              "content_alignment_vertical": "center",
              "height": {
                "type": "fixed",
                "value": 56
              },
              "margins": {
                "bottom": 16
              },
              "paddings": {
                "left": 20,
                "right": 20
              },
              "items": [
                {
                  "type": "glass_label",
                  "text": "is_enabled = @{is_enabled}"
                }
              ],
              "extensions": [
                {
                  "id": "liquid_glass",
                  "params": {
                    "style": "regular",
                    "is_enabled": "@{is_enabled}",
                    "corner_style": {
                      "type": "corners",
                      "top_left": 4,
                      "top_right": 24,
                      "bottom_left": 24,
                      "bottom_right": 4
                    }
                  }
                }
              ]
            },
            {
              "type": "container",
              "orientation": "vertical",
              "paddings": {
                "left": 16,
                "right": 16,
                "top": 16,
                "bottom": 16
              },
              "border": {
                "corner_radius": 16
              },
              "background": [
                {
                  "type": "solid",
                  "color": "#FF101010"
                }
              ],
              "items": [
                {
                  "type": "container",
                  "orientation": "vertical",
                  "content_alignment_vertical": "center",
                  "height": {
                    "type": "fixed",
                    "value": 56
                  },
                  "paddings": {
                    "left": 20,
                    "right": 20
                  },
                  "items": [
                    {
                      "type": "glass_label",
                      "text": "over dark content"
                    }
                  ],
                  "extensions": [
                    {
                      "id": "liquid_glass",
                      "params": {
                        "style": "regular",
                        "ui_style_variable": "ui_style",
                        "corner_style": {
                          "type": "capsule"
                        }
                      }
                    }
                  ]
                },
                {
                  "type": "text",
                  "text": "ui_style = @{ui_style}",
                  "font_size": 13,
                  "text_color": "#FFFFFFFF",
                  "margins": {
                    "top": 8
                  }
                }
              ]
            }
          ]
        }
      }
    ]
  }
}

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?

Blur effect

Backdrop effects