how to create a liquid glass button with color
Asked on 2026-03-28
1 search
To create a liquid glass button with color, you can use the new Liquid Glass appearance introduced by Apple. Here are some steps and considerations based on the WWDC sessions:
-
Use the Glass Configuration: In UIKit, you can use the
ui.ButtonConfigurationto apply the Liquid Glass appearance to buttons. There are two new glass appearances available: standard glass and prominent glass, which can be tinted with your app's tint color. This is discussed in the session Build a UIKit app with the new design. -
Tinting Elements: Liquid Glass allows you to tint elements to bring attention to them. This is particularly useful for buttons that need to stand out. The tinting respects the principles of the material and maximizes legibility. You can select a color that generates a range of tones mapped to the content brightness underneath the tinted element. This is covered in the session Meet Liquid Glass.
-
Glass Bezel Style in AppKit: For AppKit, you can use the new glass bezel style to replace the standard button backing with a liquid glass material. This style is compatible with the existing bezel color property, which tints the glass using the provided color. This is explained in the session Build an AppKit app with the new design.
-
Avoid Overuse of Tinting: It's important to use tinting selectively. Tinting all elements can make nothing stand out and lead to a confusing UI. Instead, focus on primary elements and actions. This advice is also from the session Meet Liquid Glass.
By following these guidelines, you can create a visually appealing liquid glass button that integrates well with your app's design.

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.

Build a UIKit app with the new design
Update your UIKit 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 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.
