More Videos

  • Meet Liquid Glass

    Liquid Glass unifies Apple platform design language while providing a more dynamic and expressive user experience. Get to know the design principles of Liquid Glass, explore its core optical and physical properties, and learn where to use it and why.

    Chapters

    Resources

    Related Videos

    WWDC25

  • Liquid Glass is a significant new stepand evolution of the look and feel of Apple software.It introduces a flexible, dynamic layerto apps and system experiences across Apple’s ecosystem of products.

    It builds on learnings from all the way from the Aqua user interface of Mac OS X,through to the realtime blurs of iOS 7, to the fluidity of iPhone X,the flexibility of the Dynamic Island, and the immersive interface of visionOS.Building off these learnings,rather than trying to simply recreate a material from the physical world,Liquid Glass is a new digital meta-materialthat dynamically bends and shapes light.

    And simultaneously, it behaves and moves organicallyin a manner that feels more like a lightweight liquid,responding to both the fluidity of touch and the dynamism of modern apps.

    I’m Chan and i’m a designer on Apple’s Human Interface design team.In this session, we’ll go over some of the core dynamic properties of Liquid Glass.Then, my colleague Shubham will discuss how Liquid Glassautomatically adapts to different contexts and environments.

    Lastly, Bruno will take us through some key principleson how to work with Liquid Glass.Let’s dive in.

    Liquid glass complements the evolution of Apple product design,as screens have gotten more rounded and immersive.

    It’s represented in the UI in rounded, floating formsthat nest neatly in the rounded curves of modern devices.These clearly defined shapes feel easy to tapand are designed to relate to the natural geometry of our fingersso they feel friendly to touch interaction.

    The primary way Liquid Glass visually defines itselfis through something called Lensing.

    Lensing occurs all around us in our experience of the natural world.Through this experience we’ve all gained an intuitive understandingof how the warping and bending of light of a transparent objectcommunicates to us its presence, its motion, and form.

    Liquid Glass uses these instinctive visual cues to provide separationand communicate layeringin a new way while letting content shine through underneath it.

    Where as previous materials scattered light,this new set of materials dynamically bends,shapes, and concentrates light in real time.

    This provides definition against the background contentwhile still feeling visually grounded in our experience of the natural world.By sculpting light like this, controls can feel ultra lightweightand transparent while still being visually distinguishable.

    Instead of fading, Liquid Glass objects materialize in and outby gradually modulating the light bending and lensing,ensuring a graceful transitionthat preserves the optical integrity of the material.

    How the material feels and behaves is just as important as the way it looks.From its foundation,both the visuals AND motion of LiquidGlass were designed as one.The motion of liquids is something we all have an intuitive feel for.Their smooth, responsive, and effortless motion and behaviorare properties that interfaces can reference to move and reactin a way that aligns with our innate grasp of the physical world.

    To this effect, Liquid Glass responds to interactionby instantly flexing and energizing with light.

    This makes the interface feel responsive, satisfying, and alive.

    And it has an inherent gel-like flexibility to itthat communicates its transient and malleable nature,as it moves in tandem with your interaction.This fluidity helps the interface feel alignedwith the dynamism and continually changing nature of our thinking and movement.

    Elements can even lift up into Liquid Glass temporarily,such as when you interact with a component.This lets the resting state stay visually quiet, while it comes to life on touch.

    This works great for things like controls,where the transparent liquid lens can be seen throughto precisely observe the value underneath it.

    This sense of fluidityalso extends not just to how the material reacts to your input,but also how it reacts to the dynamically changing environments of modern apps.As you go between states in an app,Liquid Glass dynamically morphs between thecontrols in each context.This maintains the concept of having a singular floating planethat the controls live on.And it makes transitions between different sections of an app feel fluid and seamless,as the controls continually shape shift.When showing a menu,the bubble simply pops open to reveal the content contained within.

    This lightweight, in-line transition keeps everything right where you just tapped.And it communicates a very clear and direct relationshipbetween the button and the content contained within.

    With these properties, Liquid Glass ushers in a new era of how apps look.But it also changes how they feel, too.

    With the ability to bend and shape light in new ways,fused with the ability to dynamically flex and shape shift,Liquid Glass is designed to make the experience of apps feelfundamentally more organic, more immersive, and more fluid.

    Next, to dive into how Liquid Glass adaptsautomatically across different context and platforms,I’d like to hand it over to Shubham.

    Thanks Chan.Liquid Glass is designed from the ground up to be adaptive to bothits size and its environment.Its primary goal is to remain visually clear, deferring to the content underneath.But it's also constantly, subtly changing to ensure legibilityand to maintain clear separation from the content layer.

    Liquid Glass is composed of a number of layersthat work together to give it its unique look.And unlike previous materials that had a fixed light or dark appearance,each layer continuously adapts based on what’s behind it.

    As text scrolls underneath,shadows become more prominent to create additional separation.

    The amount of tint and the dynamic rangeshift to always ensure buttons remain legible,while letting as much of the content through as possible.

    And when needed, it can also independently switch between light and dark,allowing it to feel perfectly at home in any context…really letting your app's content shine.

    When glass flexes and morphs to larger sizes –like when presenting a menu from a toolbar button– its material characteristics change to simulatea thicker, more substantial material.It casts deeper, richer shadows, has more pronounced lensing and refraction effects,and a softer scattering of light.These subtle changes enhance the perceived depthand aid in the legibility of the content within the glass element itself.

    Liquid Glass is fundamental to creatinga unified design language across all our platforms.On iPad and Mac, we've applied these very same principles.

    Just like on iPhone, these Liquid Glass layers form a distinct functional layerfor controls and navigation, floating above everythingand giving you a larger, more expansive canvas for your content.

    Glass controls nest perfectly into the rounded corners of windows,maintaining concentricity throughout the UI.

    On larger elements, like sidebars, the appearance of Liquid Glassis informed by the ambient environment within the app.

    Light from colorful content nearby can subtly spill onto its surface,reinforcing the material's context and its sense of elevation within the interface.And the effect isn't limited to the surface,the light reflects, scatters, and bleeds into the shadow as well –much like it would in the physical world.

    Floating sidebars on iPad and Mac enable a whole new level of immersion.

    The sidebar and tab bar, together, form a cohesive and consistent languagefor the core navigation of apps across all platforms.It can now be thought of as a single navigational elementthat fluidly scales as the canvas of the app grows.

    Next, let’s talk about scroll edge effects.

    Scroll edge effects work in concert withLiquid Glass to maintain that crucial separationbetween the UI and content layers and ensure legibility,especially with dynamically scrolling content.

    Just like Liquid Glass, scroll edge effects are inherently adaptive.As content begins to scroll underneath a glass element,the effect gently dissolves the content into the background,lifting the glass visually above the moving content,and allowing floating elements like titles to always remain clear.

    When darker content scrolls under,triggering the glass itself to transition to its dark style,the effect intelligently switches to apply a subtle dimming instead,again ensuring contrast and legibility.In some cases, like when there are pinned accessory views under a toolbar,such as column headers for example, we use a “hard style” effect instead.

    Instead of a gradual fade,the effect is applied uniformly across the height of the toolbarand the pinned accessory view.You'll want to use this style when you need that extra degree of visual separationbetween floating elements in the accessory viewand the scrolling content below.So that’s a look at how Liquid Glass adapts across sizes, environments, and platforms,and how you can leverage it alongside the scroll edge effectsto ensure clarity and legibility,all while letting your app's content truly take center stage.Next I’d like to hand if off to Bruno to discuss Liquid Glass variants in more depthand guidelines on how to best use them in your apps.Thanks Shubham.To get the most out of Liquid Glassit is important to understand it at a deeper level.Lets go over how its built and some of its behaviors.That way you’ll know what to expect when you start designing with it.

    The true magic of Liquid Glass lies in its holistic design.The light play, the depth effects, the adaptive changes,they aren't isolated features.They are layers inside a sophisticated system,working together to create a material that is greater than the sum of its parts.Let's look at some of these layers more closely.First, the highlights layerLiquid Glass lives inside an environment that behaves like the world around us.Light sources inside of this environment shine on the materialproducing highlights that respond to geometry just as you’d expect.On interactions, such as locking and unlocking your phone,these lights move in space,causing light to travel around the material, defining its silhouette.And in some cases, the lighting responds to device motion,making it feel like Liquid Glass is aware of its position in the real worldShadows also play an important rolein helping elements feel grounded and defined.Pay close attention to the shadow in this next slide.

    The element is aware of what’s behind itand increases the opacity of its shadow when it is over text.Conversely, it lowers the opacity of its shadowwhen it is over a solid light background.

    This provides separation from the contentto make sure elements are always easy to spot.

    When you interact with Liquid Glass, the material illuminates from withinas a form of feedback.

    Starting right under your fingertips, the glow spreads throughout the elementand onto any Liquid Glass elements nearby,interacting with the flexible properties of the materialin a way that feels natural and fluid.

    These behaviors make the interface feel aliveand directly connected to the physical world and device input.There are times where multiple layers adapt togetherto maintain clarity and focus within the UI hierarchy.

    For example, when a window loses focus on the Mac or iPad,Liquid Glass shifts its appearance and visually recedes to guide attention.

    And this sophistication comes built-in.You get all these nuanced, dynamic behaviors automaticallywhen applying Liquid Glass to your designs.Alright, now that i’ve gone over its structure and behaviors,I’ll talk about how and when to use Liquid Glass,as well as the different variants you can choose from.You may be tempted to use Liquid Glass everywherebut it is best reserved for the navigation layerthat floats above the content of your app.

    Consider this tableview:making it Liquid Glass would make it compete with other elements and muddy the hierarchy.So keep it in the content layer instead to ensure claritySimilarly, always avoid glass on glassStacking Liquid Glass elements on top of each othercan quickly make the interface feel cluttered and confusing.

    When placing elements on top of Liquid Glass,avoid applying the material to both layers.Instead, use fills, transparency, and vibrancy for the top elementsto make them feel like a thin overlay that is part of the material.

    Next, let's talk about Liquid Glass variants.There are two to choose from: Regular and Clear.They should never be mixed, as they each havetheir own characteristics and specific use cases.

    Regular is the most versatile and the one you will be using the most.This variant gives you all the visual and adaptive effects we’ve talked about,and provides legibility regardless of context.It works in any size, over any content and anything can be placed on top of it.Clear, on the other hand, does not have adaptive behaviors.It is permanently more transparent,which allows the richness of the content underneathto come through and interact with the glass in beautiful ways.To provide enough legibility for symbols or labels,it needs a dimming layer to darken the underlying content.Without it, legibility gets noticeably worse.If Liquid Glass elements in your app have a smaller footprint,you can use localized dimmingand allow the content to retain more of its original vibrancyTo recap, whereas the Regular variant can work anywhere,Clear should only be used when these 3 conditions are met.

    First, the element you’re applying it to is over media-rich content.Second, your content layer won’t be negatively affectedby introducing a dimming layer.And lastly, the content sitting above it is bold and bright.Now, I’ll talk about legibility:a central consideration that went into the design of Liquid Glass.

    Small elements like navbars and tabbars,constantly adapt their appearance depending on what’s behind them.They also flip from light to dark based on the backgroundto make sure the material looks as good as possible and is easily discernible.

    Bigger elements, like menus or sidebars also adapt based on context,but they don’t flip from light to dark.Their surface area is too big and transitions like these would be distracting.To maintain legibility,symbols and glyphs on top of Liquid Glass, do the same.They flip from light to dark and vice versa,mirroring the glass’s behavior to maximize contrast.All content placed on the Regular variant will automatically receive this treatment.You can also use custom colors.But use them selectively.When items or elements serve a distinct functional purpose, you can tint themto bring attention to them.Lets take a closer look at how this works.

    Liquid Glass introduces a new way of tinting elementsthat respects the principles of the material and maximizes legibility.

    This technique is consistent across all Liquid Glass elements,from labels, text and fully tinted buttons… to the time on your lock screen.It brings life and vibrancy to the materialand connects it more deeply to the content around it.

    Selecting a color generates a range of tonesthat are mapped to content brightness underneath the tinted element.It draws inspiration from how colored glass works in reality:changing its hue, brightness and saturationdepending on whats behind without deviating too much from the intended color.

    Not only does this emphasize the physicality of the material,but it also helps legibility and contrast.

    What’s great is that tinting is natively compatible with all the behaviors of glass.So, you can tint any element very easily.

    Here is a button that is using a solid fill instead of the built-in tinting.As you can tell, it is completely opaque and breaks the visual character of Liquid Glass.But notice when it starts using the new tinting.All of a sudden it feels more transparent and more grounded in its environment.

    Tinting should only be used to bring emphasisto primary elements and actions in the UI.First, lets look at an example of what not to do.Avoid tinting all your elements.When every element is tinted, nothing stands out, and it can be confusing.If you want to imbue color into your app, do it in the content layer instead.On the other hand, this View Bag button is a great example of when to use tinting,the red makes it stand out as the primary action in this food delivery app.The content layer is also key to avoiding any unwanted visual noise.In steady states, such as when an app first launches,avoid intersections between content and Liquid Glass.Instead, reposition or scale the content to maintain separation.

    In addition to the these legibility considerations,there are also several accessibility features thatLiquid Glass offers to suit all kinds of people and needs.

    These act as modifiers on the material that change certain layers of Liquid Glass,without sacrificing its magic.

    For instance, Reduced Transparency, makes Liquid Glass frostierand obscures more of the content behind it.Increased contrast, makes elements predominantly black or whiteand highlights them with a contrasting borderand Reduced Motion decreases the intensity of some effectsand disables any elastic properties for the material.These are available automatically whenever you use the new material.So whenever these settings are turned on at a system-level,Liquid Glass elements will get them across the board.Throughout this session we covered the core principles and values for Liquid Glass.We explored its functionality, behavior, and discussedpractical guidelines to use it effectively and inclusively.

    Liquid Glass delivers a unified design language across all platforms,seamlessly blending hardware and software.It introduces a more fluid and dynamic interaction experience than ever before,bringing a striking new look to every part of the interface.This is the start of a new chapter in Apple’s visual and interaction design,and we can't wait for you to be part of it.

      • 0:00 -Introduction

      • Liquid Glass introduces a flexible, dynamic layer to apps and system experiences across Apple’s ecosystem of products. It is a new digital meta-material that dynamically bends and shapes light, behaving organically like a lightweight liquid, responding to both the fluidity of touch and the dynamism of modern apps.

      • 1:29 -Dynamics

      • Liquid Glass complements the visual and tactile experience of modern Apple devices with their rounded screens. It uses Lensing, which dynamically bends and concentrates light, creating a transparent and lightweight appearance while also providing definition against background content.Liquid Glass elements materialize gracefully, responding to interaction by flexing and energizing with light. The interface adapts dynamically to the user's input and the changing environments of modern apps, making transitions feel fluid and natural.

      • 6:00 -Adaptivity

      • Liquid Glass adapts based on the content beneath it and the size of the display. It is composed of multiple layers that continuously shift tint, shadows, and dynamic range to ensure legibility while maintaining visual clarity. When Liquid Glass flexes and morphs to larger sizes, it simulates a thicker material with deeper shadows and more pronounced lensing and refraction effects, enhancing perceived depth. With larger controls like iPadOS and macOS sidebars, Liquid Glass is informed by the ambient environment, allowing light from colorful content to spill onto its surface, reinforcing its context and elevation.Scroll Edge Effects work in concert with Liquid Glass to dissolve content into the background, lifting the glass visually above moving content and maintaining contrast and legibility.

      • 10:31 -Principles

      • The light play, depth effects, and adaptive changes are layers in a sophisticated system, working together. Liquid Glass lives in an environment that behaves like the world around us. Light sources shine on materials to produce highlights that respond to geometry and motion.Shadow opacity increases or decreases dynamically providing a lightweight separation from background content. When interaction with controls, materials illuminate from within and reflect on other Liquid Glass elements to provide visual feedback.Liquid Glass is best reserved for the navigation layer. Avoid putting glass in the content layer and avoid putting within or on top of other glass elements to maintain hierarchy and prevent clutter. There are two variants of Liquid Glass: Regular, which is versatile and adaptive, and Clear, which is permanently transparent and needs a dimming layer for legibility. The variants should never be mixed, as they each have their own characteristics and specific use cases.Use Clear only when three conditions are met: The element is on top of media-rich content; your content layer won't be negatively impacted by a dimming layer; and, the content sitting above it is bold and bright.Elements adapt their appearance based on what's behind them. Small elements, symbols, and glyphs flip from light to dark, so the material is discernible. Bigger elements, like menus and sidebars, also adapt based on context, but do not flip from light to dark.A new way of tinting elements generates a range of tones based on content brightness underneath, mimicking real colored glass. This tinting emphasizes physicality and improves legibility and contrast. Use tinting selectively to highlight primary elements and actions. Avoid tinting all elements, which can be confusing.Liquid Glass offers several accessibility features, such as Reduced Transparency, Increased Contrast, and Reduced Motion, which modify Liquid Glass without compromising its visual appeal, and are automatically applied when system-level settings are enabled.

      • 18:53 -Next steps

      • Liquid Glass delivers a unified design language across all Apple platforms, seamlessly blending hardware and software. It introduces a more fluid and dynamic interaction experience than ever before, bringing a striking new look to every part of the interface. This is the start of a new chapter in Apple’s visual and interaction design.