How to make an Liquid Glass TabBar

Asked on 06/14/2025

1 search

To create a Liquid Glass TabBar, you can follow the guidance provided in the WWDC sessions on adopting the new design system with Liquid Glass. Here are some key points to consider:

  1. Adopt the New Design System: Start by building your app with the latest Xcode version that supports the new design system. This will automatically apply the Liquid Glass appearance to standard components like Tab Views and Split Views.

  2. Use UIKit or SwiftUI: Depending on your app's framework, you can use either UIKit or SwiftUI to implement Liquid Glass. For UIKit, you can use the UIVisualEffectView to create a Liquid Glass effect. For SwiftUI, you can use the glossEffect modifier to apply the Liquid Glass effect to your custom views.

  3. Design Intent: Liquid Glass is designed to be an interactive layer that floats above your content. It should be used for the most important elements of your app, such as navigation controls. Avoid using Liquid Glass for elements that could clutter the interface or compete with other elements.

  4. Customization: You can customize the appearance of Liquid Glass by using properties like corner radius and tint color. However, it's important to maintain the design intent and ensure that the Liquid Glass elements do not overlap or create a cluttered interface.

For more detailed guidance, you can refer to the session Build a UIKit app with the new design (19:15) which covers how to adopt the Liquid Glass look and feel in your custom UI elements.