--- metadata: - name: generator content: Diplodoc Platform v5.70.0 alternate: - https://divkit.tech/docs/en/concepts/extensions/liquid-glass.md - https://divkit.tech/docs/ru/concepts/extensions/liquid-glass.md - href: https://divkit.tech/docs/en/concepts/extensions/liquid-glass.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 # Liquid Glass effect To add the Liquid Glass effect to the element, use the `liquid_glass` extension (iOS only): ```json translate=no { "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 {#params} #| || **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 {#behavior} - 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 {#connect} ```swift translate=no DivKitComponents( ... extensionHandlers: [ LiquidGlassExtensionHandler() ] ) ``` ## Example {#example} {% cut "Card with several variants of the effect" %} ```json translate=no { "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 } } ] } ] } } ] } } ``` {% endcut %} ## 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)