Liquid Glass

Apple sought a new design language to unify the look and feel of interface elements across its devices, with their various window sizes and displays.^[2][3] The company decided to move away from the flat design cues popularized by Jony Ive in iOS 7 (2013) toward more expressive, skeuomorphic elements.^[4][5] It also decided to introduce a dynamic "material", a visual effect that provides a sense of depth and hierarchy between elements.

The "material" of Liquid Glass combines the "optical properties of glass with a sense of fluidity".^[6] It has translucent elements that adapt to their environment, refracting and reflecting elements placed behind them. Lighting and shaders are used to suggest clear or frosted glass; elements adapt to a light or dark appearance to make text and icons on top of the material legible.^{[7][8][9][10]} On iOS and iPadOS, elements react to the device's movement with animations that suggest the movement of a drop of liquid.^[11]

Apple's updated human interface guidelines say that apps made with Liquid Glass should show hierarchy between content and controls.^[12]

Liquid Glass overhauls existing iOS interface components such as text, sliders, toggles, alerts, panels, and sidebars. The material is integrated into various apps and system features such as the Dock, notifications, and Control Center; it can also be used by third-party apps.^[10][13]

App icons have been redesigned to use a layered system akin to the one used on visionOS and tvOS, applying translucency and a glass-like shimmer effect, which also reacts to device movement, while applying greater use of gradients.^[14] App icons can adopt a clear appearance that make them look transparent.^[15] Toolbars and other elements on-screen are no longer pinned to the device's bezels, but are separated into bubbles that appear and disappear based on the context. For example, the Music app's tab bar shrinks when scrolling. The new design also allows the material to change its shape and size, such as the text selection tooltip expanding to show all options in a vertical list.^[16]

Apple's senior vice president of software engineering, Craig Federighi, said designers used the company's industrial design studios to fabricate glass of various opacities and lensing properties, so they could closely match the interface properties to those of real glass.^[8] He also said Apple silicon provides the extra computational power required to run Liquid Glass.^[17][18]

In a video detailing the design change, Apple said the language was influenced by the Aqua design language of macOS, real-time Gaussian blurring in iOS 7, the motion in iPhone X, the Dynamic Island on the iPhone 14 Pro and later, and the glass-like UI of visionOS.^[7][8] Liquid Glass has strong influences from "glassmorphism", a design style that became popular in 2021 in part by Microsoft's Windows 11 and its use of Fluent Design as well as Apple's macOS Big Sur.^[19][20] Many critics and social media users noted similarities to Aqua and Windows Aero, including glass-like textures popularized by Windows Vista.^[21][22][23] TechRadar's Jamie Richards also wrote that Liquid Glass was likely influenced by Frutiger Aero.^[24]

Liquid Glass has received a generally mixed-to-negative response. Some reviewers praised its attempt to emulate the refractive and lensing qualities of real glass, describing the design as visually sophisticated.^[28][4][21] Critics described the interface as distracting and, in some cases, less usable. Designers interviewed by Wired said that the visual effects could draw attention away from app content and that smaller development teams might struggle with the increased design complexity.^[4] Other commentators argued that Liquid Glass departed from established user interface conventions in ways that could make macOS more difficult to navigate.^[29][30]

Legibility was a recurring concern. Some designers reported that transparency in certain interface elements made text harder to read,^[4] particularly in low-contrast conditions such as direct sunlight.^[28][31] Following feedback from the first developer beta, Apple made several adjustments intended to improve readability. These included increasing opacity in navigation bars and other user interface chrome, refining system overlays and modal backgrounds, and introducing additional controls for transparency in later builds.^[32][33][34]

At WWDC 2026, Apple announced a revamp to Liquid Glass for iOS 27, iPadOS 27, and macOS 27 Golden Gate to address criticism. The updated design reduced default transparency, changed the effect of the glass, changed sidebar corners on iPadOS and macOS, and revamped app icons to make them more recognizable. Apple also added a user-facing control that lets users adjust the interface between clearer glass and more heavily tinted glass appearances, via a slider in each OS's settings.^[35][36]

Since the official release, several unofficial open-source libraries have been developed to emulate the Liquid Glass aesthetic in web browsers, which lack a native equivalent to the material.^[37] Because browsers cannot access the pixels rendered behind an element, implementations approximate the effect's refraction, translucency and lensing using techniques such as CSS backdrop-filter, SVG displacement filters, and WebGL and WebGPU shaders.

The earliest web implementations appeared within days of the WWDC 2025 announcement. liquid-glass-react, a React component library, was released on June 10, 2025, the day after the announcement, and became the highest-downloaded Liquid Glass package on npm.^[38] Its development ceased shortly after release; the repository has not been updated since June 2025.^[39] liquid-glass-js, a WebGL library, followed on June 11.^[40]

Later projects attempted to improve cross-browser parity and visual accuracy. @samasante/liquid-glass, a React lens component, applies an SVG displacement filter to refract live DOM content in Chrome, Safari and Firefox, rather than applying backdrop-filter: url(), which is Chromium-only.^[41]

liquidGL, by NaughtyDuk, is a framework-agnostic JavaScript library that renders the material in WebGPU with automatic fallback to WebGL2, WebGL1 and CSS backdrop-filter; it supports real-time refraction of dynamic content including video, chromatic aberration, adjustable bevels and specular highlights.^[42] As of September 2026 it remained the most actively maintained of the widely used web implementations and the highest-downloaded framework-agnostic Liquid Glass package on npm.^[43][44]

Pure CSS and SVG implementations, requiring no WebGL or canvas, also emerged, such as @dpawlikowski/liquid-glass, which uses feTurbulence and feDisplacementMap filters to simulate refraction.^[45]

• Aqua (user interface)
• Fluent Design System
• Material Design
• Neumorphism
• Windows Aero