Skip to content

Liquid glass interfaces

Surfaces that frost what is behind them: a blurred body, a bright rim that follows the pointer, and a plain frosted fallback where backdrop filters are missing.

8 items

  • A glass control centre with four toggle tiles and two sliders

    Glass Controls

    Free

    A control-centre panel: glass toggle tiles and sliders that are real range inputs.

    Liquid glass · CSS

  • A glass confirmation dialog with two buttons over a dimmed colourful page

    Glass Dialog

    Free

    A confirmation dialog on glass over a dimmed scrim, with focus kept inside and Escape to cancel.

    Liquid glass · CSS

  • A row of glass app icons, the middle one enlarged, over a gradient

    Glass Dock

    Free

    A floating dock of glass icons that swell toward the pointer, with labels and badges.

    Liquid glass · CSS

  • A glass pill header with a wordmark, four links and a white call to action

    Glass Nav

    Free

    A floating pill header on glass with a highlight that glides between links.

    Liquid glass · CSS

  • A stack of glass notification cards, the front one showing a calendar reminder

    Glass Notifications

    Free

    A lock-screen notification stack on glass that fans out into a list and dismisses one by one.

    Liquid glass · CSS

  • A frosted glass card over a colourful gradient, with a bright rim and a soft sheen

    Glass Panel

    Free

    The base liquid glass surface: blurred, rimmed and sheened, as a titled card.

    Liquid glass · CSS

  • A glass music player with gradient art, a progress bar and three transport buttons

    Glass Player

    Free

    A now-playing card on glass with art, a progress bar and play, back and forward controls.

    Liquid glass · CSS

  • A pill of four glass tabs with the second one raised

    Glass Tabs

    Free

    A segmented control on glass with a thumb that slides with a small liquid overshoot.

    Liquid glass · CSS

↑ ↓ to move↵ to openesc to close