# Liquid glass UI gallery: screens, components, effects Source: https://meniscus.site/gallery · Updated 2026-09-27 Every image is rendered from the Meniscus showcase over procedural backdrops, filed by what it shows and annotated with what to look for. ## Screens - ![Phone AI assistant conversation over a dark curved-band wallpaper: glass corner buttons around a flat title with a soft blurred band at the top edge, a flat thread of solid blue user bubbles and near-opaque dark replies with a code block, and a floating glass composer capsule between a round attach lens and a solid send button.](https://meniscus.site/gallery/ai-chat-dark-studio.webp) — **Assistant** (dark, ios) - ![Phone AI assistant conversation over a curved-band wallpaper: glass corner buttons around a flat title with a soft blurred band at the top edge, a flat thread of solid blue user bubbles and near-opaque white replies with a code block, and a floating glass composer capsule between a round attach lens and a solid send button.](https://meniscus.site/gallery/ai-chat-light-studio.webp) — **Assistant** (light, ios) - ![Desktop AI assistant window over a dark curved-band wallpaper: an edge-to-edge frosted sidebar of conversations, a glass model selector and new-chat lens, a flat thread of solid blue user bubbles and near-opaque dark replies with a code block, and a floating glass composer between an attach lens and a solid send button.](https://meniscus.site/gallery/ai-workspace-dark-studio.webp) — **AI workspace** (dark, macos) - ![Desktop AI assistant window over a curved-band wallpaper: an edge-to-edge frosted sidebar of conversations, a glass model selector and new-chat lens, a flat thread of solid blue user bubbles and near-opaque white replies with a code block, and a floating glass composer between an attach lens and a solid send button.](https://meniscus.site/gallery/ai-workspace-light-studio.webp) — **AI workspace** (light, macos) - ![A desktop library window with an edge-to-edge frosted sidebar, three flat collection thumbnails, a solid action button and a glass statistics card, on a backdrop of dark wavy stripes with near-black gaps.](https://meniscus.site/gallery/desktop-library-dark-studio.webp) — **Library** (dark, macos) - ![A desktop library window with an edge-to-edge frosted sidebar, three flat collection thumbnails, a solid action button and a glass statistics card, on a backdrop of wavy pastel stripes.](https://meniscus.site/gallery/desktop-library-light-studio.webp) — **Library** (light, macos) - ![Phone wallet home over a dark street map: flat balance and weekly change, four round glass action lenses with labels, a glass card summary with a flat budget meter, a grouped glass list of transactions with flat icon tiles scrolling under a floating tab bar.](https://meniscus.site/gallery/finance-wallet-dark-studio.webp) — **Wallet** (dark, ios) - ![Phone wallet home over a full-bleed street map: flat balance and weekly change, four round glass action lenses with labels, a glass card summary with a flat budget meter, a grouped glass list of transactions with flat icon tiles scrolling under a floating tab bar.](https://meniscus.site/gallery/finance-wallet-light-studio.webp) — **Wallet** (light, ios) - ![Phone fitness summary over a night skyline: a glass segmented control, a glass card with flat activity rings, move, exercise and stand totals and three flat stat tiles, a glass workout card with one solid start button, and a floating tab bar.](https://meniscus.site/gallery/fitness-dark-studio.webp) — **Fitness** (dark, ios) - ![Phone fitness summary over full-bleed dunes: a glass segmented control, a glass card with flat activity rings, move, exercise and stand totals and three flat stat tiles, a glass workout card with one solid start button, and a floating tab bar.](https://meniscus.site/gallery/fitness-light-studio.webp) — **Fitness** (light, ios) - ![Phone lock screen over a dark curved-band wallpaper: large flat date and clock with a soft shadow, two separate glass notification cards, a glass now-playing panel with flat transport buttons and a lens slider thumb, and round glass flashlight and camera buttons at the bottom corners.](https://meniscus.site/gallery/lock-screen-dark-studio.webp) — **Lock screen** (dark, ios) - ![Phone lock screen over a curved-band wallpaper: large flat date and clock, two separate glass notification cards, a glass now-playing panel with flat transport buttons and a lens slider thumb, and round glass flashlight and camera buttons at the bottom corners.](https://meniscus.site/gallery/lock-screen-light-studio.webp) — **Lock screen** (light, ios) - ![Mobile audio player on a full-bleed night-city scene, with album art, glass playback controls, a scrubber and a floating tab bar with a separate search lens.](https://meniscus.site/gallery/mobile-player-dark-studio.webp) — **Player** (dark, ios) - ![Mobile audio player on full-bleed dune artwork, with album art, glass playback controls, a scrubber and a floating tab bar with a separate search lens.](https://meniscus.site/gallery/mobile-player-light-studio.webp) — **Player** (light, ios) - ![Desktop analytics dashboard window over a night skyline: an edge-to-edge frosted sidebar, a flat heading with a glass search field, notification lens, avatar and one solid primary button, three glass metric cards, and glass cards holding a flat revenue chart with summary tiles and a flat list of plans and recent upgrades.](https://meniscus.site/gallery/saas-dashboard-dark-studio.webp) — **Analytics** (dark, web) - ![Desktop analytics dashboard window over dunes: an edge-to-edge frosted sidebar, a flat heading with a glass search field, notification lens, avatar and one solid primary button, three glass metric cards, and glass cards holding a flat revenue chart with summary tiles and a flat list of plans and recent upgrades.](https://meniscus.site/gallery/saas-dashboard-light-studio.webp) — **Analytics** (light, web) - ![Phone smart-home dashboard over a night skyline: flat greeting and home summary, scene chips with one solid selected chip, a glass room card with two switches and a brightness slider, thermostat and door-lock widgets, and a floating tab bar with a separate search lens.](https://meniscus.site/gallery/smart-home-dark-studio.webp) — **Smart home** (dark, ios) - ![Phone smart-home dashboard over full-bleed dunes: flat greeting and home summary, scene chips with one solid selected chip, a glass room card with two switches and a brightness slider, thermostat and door-lock widgets, and a floating tab bar with a separate search lens.](https://meniscus.site/gallery/smart-home-light-studio.webp) — **Smart home** (light, ios) - ![Phone weather screen over a night skyline: large flat place, temperature and condition text with a soft shadow, a glass hourly strip, a glass five-day card with flat gradient range bars scrolling under a floating tab bar.](https://meniscus.site/gallery/weather-dark-studio.webp) — **Weather** (dark, ios) - ![Phone weather screen over full-bleed dunes: large flat place, temperature and condition text on the sky, a glass hourly strip, a glass five-day card with flat gradient range bars scrolling under a floating tab bar.](https://meniscus.site/gallery/weather-light-studio.webp) — **Weather** (light, ios) ## Components - ![Three stacked accordion rows with the middle one expanded into a text panel, over a zoomed night skyline.](https://meniscus.site/gallery/accordion-dark-studio.webp) — **accordion** (dark, web) - ![Three stacked accordion rows with the middle one expanded into a text panel, over zoomed desert ridges.](https://meniscus.site/gallery/accordion-light-studio.webp) — **accordion** (light, web) - ![A row of generic app icons followed by one icon in default, dark, clear and tinted material variants over a procedural backdrop.](https://meniscus.site/gallery/app-icon-dark-studio.webp) — **app icon** (dark, web) - ![A row of generic app icons followed by one icon in default, dark, clear and tinted material variants over a procedural backdrop.](https://meniscus.site/gallery/app-icon-light-studio.webp) — **app icon** (light, web) - ![Round avatars with initials or gradient artwork, followed by an overlapping avatar stack over a procedural backdrop.](https://meniscus.site/gallery/avatar-dark-studio.webp) — **avatar** (dark, web) - ![Round avatars with initials or gradient artwork, followed by an overlapping avatar stack over a procedural backdrop.](https://meniscus.site/gallery/avatar-light-studio.webp) — **avatar** (light, web) - ![Solid count badges on two glass icon buttons, a presence dot on an avatar and a standalone label pill over a procedural backdrop.](https://meniscus.site/gallery/badge-dark-studio.webp) — **badge** (dark, web) - ![Solid count badges on two glass icon buttons, a presence dot on an avatar and a standalone label pill over a procedural backdrop.](https://meniscus.site/gallery/badge-light-studio.webp) — **badge** (light, web) - ![Two rows of capsule buttons in solid primary, clear, tinted, icon, destructive and disabled styles, over a zoomed night skyline.](https://meniscus.site/gallery/button-dark-studio.webp) — **button** (dark, web) - ![Two rows of capsule buttons showing primary, secondary, tinted, clear, destructive and disabled states over a procedural backdrop.](https://meniscus.site/gallery/button-light-studio.webp) — **button** (light, web) - ![A short statistics card beside a more frosted notes card with actions over a procedural backdrop.](https://meniscus.site/gallery/card-dark-studio.webp) — **card** (dark, web) - ![A short statistics card beside a more frosted notes card with actions over a procedural backdrop.](https://meniscus.site/gallery/card-light-studio.webp) — **card** (light, web) - ![Checked, unchecked, mixed and disabled checkbox rows in a glass panel, over a zoomed night skyline and its waterline.](https://meniscus.site/gallery/checkbox-dark-studio.webp) — **checkbox** (dark, web) - ![Checked, unchecked, mixed and disabled checkbox rows in a glass panel over a procedural backdrop.](https://meniscus.site/gallery/checkbox-light-studio.webp) — **checkbox** (light, web) - ![A standalone context menu with shortcuts, a divider and a disabled command, over a zoomed night skyline.](https://meniscus.site/gallery/context-menu-dark-studio.webp) — **context menu** (dark, web) - ![A standalone context menu with shortcuts, a divider and a disabled command, over zoomed desert ridges.](https://meniscus.site/gallery/context-menu-light-studio.webp) — **context menu** (light, web) - ![A frosted confirmation dialog over a dimmed, blurred night-city scene, with a filled confirm field, a glass Cancel and a solid red Delete.](https://meniscus.site/gallery/dialog-dark-studio.webp) — **dialog** (dark, web) - ![A frosted confirmation dialog over a dimmed, blurred dune scene, with a filled confirm field, a glass Cancel and a solid red Delete.](https://meniscus.site/gallery/dialog-light-studio.webp) — **dialog** (light, web) - ![A floating glass dock carrying eight generic app icons with running dots, over a zoomed night skyline.](https://meniscus.site/gallery/dock-dark-studio.webp) — **dock** (dark, web) - ![A floating glass dock carrying generic app icons with running indicators over a procedural backdrop.](https://meniscus.site/gallery/dock-light-studio.webp) — **dock** (light, web) - ![Round icon buttons and shorter capsule variants, including a selected heart over a procedural backdrop.](https://meniscus.site/gallery/icon-button-dark-studio.webp) — **icon button** (dark, web) - ![Round icon buttons and shorter capsule variants, including a selected heart over a procedural backdrop.](https://meniscus.site/gallery/icon-button-light-studio.webp) — **icon button** (light, web) - ![Text inputs showing an error, helper text, multiline entry and verification-code boxes over a procedural backdrop.](https://meniscus.site/gallery/input-dark-studio.webp) — **input** (dark, web) - ![Text inputs showing an error, helper text, multiline entry and verification-code boxes over a procedural backdrop.](https://meniscus.site/gallery/input-light-studio.webp) — **input** (light, web) - ![A grouped settings list with coloured icons, dividers, trailing details and a switch over a procedural backdrop.](https://meniscus.site/gallery/list-dark-studio.webp) — **list** (dark, web) - ![A grouped settings list with coloured icons, dividers, trailing details and a switch over a procedural backdrop.](https://meniscus.site/gallery/list-light-studio.webp) — **list** (light, web) - ![Round clear play and skip buttons above a scrubber with a white thumb, over a zoomed night skyline darkened toward the bottom by a scrim.](https://meniscus.site/gallery/media-controls-dark-studio.webp) — **media controls** (dark, web) - ![Circular playback controls and a scrubber over a procedural scene dimmed toward the bottom.](https://meniscus.site/gallery/media-controls-light-studio.webp) — **media controls** (light, web) - ![An action menu hanging below its capsule trigger, with icons, shortcuts, dividers and a destructive row, over a zoomed night skyline.](https://meniscus.site/gallery/menu-dark-studio.webp) — **menu** (dark, web) - ![An action menu hanging below its capsule trigger, with icons, shortcuts, dividers and a destructive row, over zoomed desert ridges.](https://meniscus.site/gallery/menu-light-studio.webp) — **menu** (light, web) - ![A desktop menu strip with one item open into a dropdown of shortcuts, dividers and disabled items, over a zoomed night skyline.](https://meniscus.site/gallery/menubar-dark-studio.webp) — **menubar** (dark, web) - ![A desktop menu strip with one item open into a dropdown of shortcuts, dividers and disabled items, over zoomed desert ridges.](https://meniscus.site/gallery/menubar-light-studio.webp) — **menubar** (light, web) - ![A collection page whose hero of a zoomed night skyline carries a floating capsule navigation bar and a separate round search button.](https://meniscus.site/gallery/navigation-bar-dark-studio.webp) — **navigation bar** (dark, web) - ![A collection page whose hero of zoomed desert ridges carries a floating capsule navigation bar and a separate round search button.](https://meniscus.site/gallery/navigation-bar-light-studio.webp) — **navigation bar** (light, web) - ![A playback settings popover below a round icon trigger, with two switches and a small confirmation capsule, over a zoomed night skyline.](https://meniscus.site/gallery/popover-dark-studio.webp) — **popover** (dark, web) - ![A playback settings popover below a round icon trigger, with two switches and a small confirmation capsule, over zoomed desert ridges.](https://meniscus.site/gallery/popover-light-studio.webp) — **popover** (light, web) - ![A glass panel holding two determinate progress tracks and an indeterminate one, over a zoomed night skyline and its waterline.](https://meniscus.site/gallery/progress-dark-studio.webp) — **progress** (dark, web) - ![A glass panel holding two determinate progress tracks and an indeterminate one, over zoomed desert ridges.](https://meniscus.site/gallery/progress-light-studio.webp) — **progress** (light, web) - ![A capsule search field with a separate suggestion list below it, over a zoomed night skyline and its waterline.](https://meniscus.site/gallery/search-field-dark-studio.webp) — **search field** (dark, web) - ![A capsule search field with a separate suggestion list below it, over zoomed desert ridges.](https://meniscus.site/gallery/search-field-light-studio.webp) — **search field** (light, web) - ![A language selector with its capsule trigger and an open grouped list with a checked option, over a zoomed night skyline.](https://meniscus.site/gallery/select-dark-studio.webp) — **select** (dark, web) - ![A language selector with its capsule trigger and an open grouped list with a checked option, over zoomed desert ridges.](https://meniscus.site/gallery/select-light-studio.webp) — **select** (light, web) - ![Three compact settings rows split by inset hairlines inside a glass panel, over a zoomed night skyline and its waterline.](https://meniscus.site/gallery/separator-dark-studio.webp) — **separator** (dark, web) - ![Three compact settings rows separated by inset hairlines inside a glass panel over a procedural backdrop.](https://meniscus.site/gallery/separator-light-studio.webp) — **separator** (light, web) - ![A floating bottom sheet with a grabber, a title, two actions and a short body line, over a dark street map with a route inside a phone frame.](https://meniscus.site/gallery/sheet-dark-studio.webp) — **sheet** (dark, web) - ![A floating bottom sheet with a grabber, a title, two actions and a short body line, over a street map with a route inside a phone frame.](https://meniscus.site/gallery/sheet-light-studio.webp) — **sheet** (light, web) - ![A full-height frosted library sidebar flush with the window edge, with section labels, accent icons, counts and a selected row, over a procedural backdrop.](https://meniscus.site/gallery/sidebar-dark-studio.webp) — **sidebar** (dark, web) - ![A full-height frosted library sidebar flush with the window edge, with section labels, accent icons, counts and a selected row, over a procedural backdrop.](https://meniscus.site/gallery/sidebar-light-studio.webp) — **sidebar** (light, web) - ![Two labelled sliders in a glass panel, one with a resting solid thumb and one with a larger held lens thumb, over a zoomed night skyline and its waterline.](https://meniscus.site/gallery/slider-dark-studio.webp) — **slider** (dark, web) - ![Two labelled sliders in a glass panel, with resting and held lens thumbs over a procedural backdrop.](https://meniscus.site/gallery/slider-light-studio.webp) — **slider** (light, web) - ![Two labelled quantity steppers in a glass panel, each a single capsule with flat minus and plus glyphs around a centred value, over a zoomed night skyline and its waterline.](https://meniscus.site/gallery/stepper-dark-studio.webp) — **stepper** (dark, web) - ![Two labelled quantity steppers in a glass panel, each a single capsule with flat minus and plus controls, over a procedural backdrop.](https://meniscus.site/gallery/stepper-light-studio.webp) — **stepper** (light, web) - ![Four switch rows showing on, off, held thumb and disabled states in a glass panel over a procedural backdrop.](https://meniscus.site/gallery/switch-dark-studio.webp) — **switch** (dark, web) - ![Four switch rows showing on, off, held thumb and disabled states in a glass panel over a procedural backdrop.](https://meniscus.site/gallery/switch-light-studio.webp) — **switch** (light, web) - ![A dark phone feed with a night-city photo scrolling under an inset floating tab bar, with a selected pill and a separate search lens.](https://meniscus.site/gallery/tab-bar-dark-studio.webp) — **tab bar** (dark, web) - ![A phone feed with a landscape photo scrolling under an inset floating tab bar, with a selected pill and a separate search lens.](https://meniscus.site/gallery/tab-bar-light-studio.webp) — **tab bar** (light, web) - ![Segmented date-range and appearance controls with inset selected pills over a procedural backdrop.](https://meniscus.site/gallery/tabs-dark-studio.webp) — **tabs** (dark, web) - ![Segmented date-range and appearance controls with inset selected pills over a procedural backdrop.](https://meniscus.site/gallery/tabs-light-studio.webp) — **tabs** (light, web) - ![Two stacked notification cards at the lower right, with a solid trigger button at the top left, over a zoomed night skyline and its waterline.](https://meniscus.site/gallery/toast-dark-studio.webp) — **toast** (dark, web) - ![Two stacked notification cards at the lower right, with a solid trigger button at the top left, over zoomed desert ridges.](https://meniscus.site/gallery/toast-light-studio.webp) — **toast** (light, web) - ![A row of filter chips with two selected, above a glass panel of selected, unselected and disabled radio options, over a zoomed night skyline and its waterline.](https://meniscus.site/gallery/toggle-dark-studio.webp) — **toggle** (dark, web) - ![Filter chips above a panel of selected, unselected and disabled radio options over a procedural backdrop.](https://meniscus.site/gallery/toggle-light-studio.webp) — **toggle** (light, web) - ![A glass formatting toolbar with text-style, alignment and list groups split by hairlines, two items selected, over a procedural backdrop.](https://meniscus.site/gallery/toolbar-dark-studio.webp) — **toolbar** (dark, web) - ![A glass formatting toolbar with text-style, alignment and list groups split by hairlines, two items selected, over a procedural backdrop.](https://meniscus.site/gallery/toolbar-light-studio.webp) — **toolbar** (light, web) - ![A small shortcut tooltip floating above the first of three round icon buttons, over a zoomed night skyline.](https://meniscus.site/gallery/tooltip-dark-studio.webp) — **tooltip** (dark, web) - ![A small shortcut tooltip floating above the first of three round icon buttons, over zoomed desert ridges.](https://meniscus.site/gallery/tooltip-light-studio.webp) — **tooltip** (light, web) - ![Weather, weekly activity chart and battery widgets side by side over a procedural backdrop.](https://meniscus.site/gallery/widget-dark-studio.webp) — **widget** (dark, web) - ![Weather, weekly activity chart and battery widgets side by side over a procedural backdrop.](https://meniscus.site/gallery/widget-light-studio.webp) — **widget** (light, web) ## Effects - ![A glass capsule button over dark ribbons; in this frame its beam is barely visible.](https://meniscus.site/gallery/border-beam-dark-studio.webp) — **border beam** (dark, web) - ![A glass capsule button over pastel ribbons, with a short blue beam on its rim at the top-right cap.](https://meniscus.site/gallery/border-beam-light-studio.webp) — **border beam** (light, web) - ![A frosted rounded pane over an animated caustic light network on deep teal.](https://meniscus.site/gallery/caustics-dark-studio.webp) — **caustics** (dark, web) - ![A clear circular lens over a night skyline, with red, green and blue fringes on the window lights near its rim.](https://meniscus.site/gallery/dispersion-dark-studio.webp) — **dispersion** (dark, web) - ![A frosted rounded pane over dunes and sky, with the dune bands blurred inside.](https://meniscus.site/gallery/frost-light-studio.webp) — **frost** (light, web) - ![A convex lens over a dark grid with soft colour glows, with a thin-film hue band on its rim.](https://meniscus.site/gallery/iridescence-dark-studio.webp) — **iridescence** (dark, web) - ![A glass composer bar over a night skyline, with a dark send button ringed in liquid metal.](https://meniscus.site/gallery/liquid-metal-dark-studio.webp) — **liquid metal** (dark, web) - ![A glass composer bar over dunes, with a dark send button ringed in liquid metal.](https://meniscus.site/gallery/liquid-metal-light-studio.webp) — **liquid metal** (light, web) - ![Two clear lens lobes merging into one liquid shape over dunes.](https://meniscus.site/gallery/morph-light-studio.webp) — **morph** (light, web) - ![A convex circular lens over a dark calibration grid, bending the lines at its rim.](https://meniscus.site/gallery/refraction-dark-studio.webp) — **refraction** (dark, web) - ![A clear glass capsule over a night skyline, lit by a bright key rim at the top.](https://meniscus.site/gallery/specular-dark-studio.webp) — **specular** (dark, web) - ![A blue-tinted glass capsule over dunes and sky.](https://meniscus.site/gallery/tint-light-studio.webp) — **tint** (light, web)