how do i adopt liquid glass on the web?
Asked on 06/11/2025
1 search
To adopt Liquid Glass on the web, you would need to understand its principles and how it is used in native app development, as discussed in the WWDC sessions. Liquid Glass is primarily a design element used in Apple's native app frameworks like SwiftUI, UIKit, and AppKit. It provides a translucent, adaptive layer that enhances the visual depth and interactivity of apps.
For web development, you would need to mimic these effects using web technologies such as CSS and JavaScript. You can create similar visual effects by using CSS properties like backdrop-filter, opacity, and box-shadow to achieve a glass-like appearance. However, the dynamic and adaptive behaviors of Liquid Glass, such as its ability to morph and adapt to different contexts, would require more complex JavaScript logic to replicate.
For more detailed guidance on Liquid Glass, you can refer to the session Meet Liquid Glass (12:34) which discusses its structure, behaviors, and how to use it effectively in your designs.
Build an AppKit app with the new design
Update your AppKit app to take full advantage of the new design system. We’ll dive into key changes to tab views, split views, bars, presentations, search, and controls, and show you how to use Liquid Glass in your custom UI. To get the most out of this video, we recommend first watching “Get to know the new design system” for general design guidance.
Build a SwiftUI app with the new design
Explore the ways Liquid Glass transforms the look and feel of your app. Discover how this stunning new material enhances toolbars, controls, and app structures across platforms, providing delightful interactions and seamlessly integrating your app with the system. Learn how to adopt new APIs that can help you make the most of Liquid Glass.
Platforms State of the Union
Discover the newest advancements on Apple platforms.