AngularLynx

    <blur-view>

    Blurs whatever is behind it, like CSS backdrop-filter: blur(), which Lynx doesn't support. On iOS 26 and on web it also draws Apple's Liquid Glass material. To blur an element's own content instead, use the filter: blur() style.

    element-blur-viewsrc/app/app.ts

    Usage

    src/app/now-playing.ts
    import { Component } from '@angular/core';
import { LYNX_ELEMENTS } from '@blotch/angular-lynx';

@Component({
  selector: 'app-now-playing',
  imports: [LYNX_ELEMENTS],
  template: `
    <view style="width: 100%; height: 300px;">
      <image
        src="https://example.com/cover.jpg"
        style="width: 100%; height: 100%;"
      />
      <blur-view
        blur-radius="20px"
        blur-effect="light"
        style="position: absolute; left: 16px; right: 16px; bottom: 16px; height: 64px; border-radius: 16px;"
      >
        <text>Now playing</text>
      </blur-view>
    </view>
  `,
})
export class NowPlaying {}

    Import LYNX_ELEMENTS in your component (see Elements).

    Warning

    Needs XElement in custom native apps (see Embedding).

    Attributes

    AttributeTypeDefaultDescription
    blur-radiusstring'0px'Strength of the blur, e.g. '20px'. Every platform supports it.
    blur-effect'light' | 'extra-light' | 'dark' | 'glass' | 'glass-container''light'The material: how bright the blur is, or Liquid Glass ('glass', iOS 26 and later). A 'glass-container' merges the glass <blur-view> elements inside it.
    glass-style'regular' | 'clear''regular'Glass variant: frosted, or clear.
    glass-tint-colorstring'transparent'Color tint over the glass.
    glass-interactivebooleanfalseiOS and web. The glass reacts to touches.
    spacingnumber0iOS and web. Inside a 'glass-container', glass shapes closer than this many px merge into one.
    ios-user-interface-style'light' | 'dark'—iOS (Lynx 4.1 and later) and web. Forces a light or dark material.
    blur-samplingnumber6Android only. Blurs a smaller copy of the background: higher is faster but softer.
    enable-auto-blurbooleantrueAndroid only. Blurs again whenever the content behind changes.
    android-capture-targetstringThe page (set by AngularLynx)Android only. id, without #, of the view whose pixels get blurred. That view needs flatten="false". AngularLynx points it at the page so that a <blur-view> inside another one still works; '' restores Android's own choice.
    experimental-update-blur-radiusboolean—Android only, experimental. Switches how the blur is refreshed.

    Plus the common attributes, such as id, class and style.

    Events

    None, apart from the common events, such as bindtap.

    Platform support

    PlatformWhat you get
    iOSBlur, every material, and Liquid Glass on iOS 26 and later.
    AndroidBlur only. AngularLynx tints it to approximate the materials and glass; a background-color or box-shadow you set replaces the tint. Glass doesn't refract or merge.
    WebAngularLynx draws the blur, the materials and the glass itself, the glass with WebGL. Without WebGL, glass falls back to a plain blur.