Apple released Liquid Glass with iOS 26.0 back in June at WWDC 2025. This is one of the major redesign that Apple has introduced since they went flat design with iOS 7.0.
Standard system components like NavigationStack, titleBar and toolBar and can take advantage of the new design and redefine how one uses iOS or other Apple platforms.
In this blog post, I am addressing glass and glassEffect and how they can be used with buttons, texts and images.
GlassEffect
- Applying Liquid Glass is as easy as adding
glassEffect(_:in:isEnabled:modifier. - This renders a shape behind the anchor with Liquid Glass.
- By default, the
regularvariant of glass is applied to the anchor.
GlassEffect Customization
- Change the shape by applying the
shapeparameter. - Apply
tintto the glass. - Add
interactiveto make them react to touch and pointer interactions.
In buttons, we can apply
.buttonStyle(.glass)directly, instead of using.glassEffect().
An example
import SwiftUI
struct GlassView: View {
var body: some View {
NavigationStack {
Form {
Section("No Liquid Glass") {
LabeledContent("None") {
Button("A Button") {
}
}
LabeledContent("Borderless") {
Button("A Button") {
}
.buttonStyle(.borderless)
}
LabeledContent("Plain") {
Button("A Button") {
}
.buttonStyle(.plain)
}
LabeledContent("Bordered") {
Button("A Button") {
}
.buttonStyle(.bordered)
}
LabeledContent("Prominent") {
Button("A Button") {
}
.buttonStyle(.borderedProminent)
}
}
Section("Liquid Glass Buttons") {
LabeledContent("Glass") {
Button("A Button") {
}
.buttonStyle(.glass)
}
LabeledContent("Glass Prominent") {
Button("A Button") {
}
.buttonStyle(.glassProminent)
}
}
}
Text("Hello, Liquid!")
.font(.largeTitle)
.padding()
.glassEffect(.clear)
HStack {
Image(systemName: "checkmark")
.font(.system(size: 36))
.frame(width: 80, height: 80)
.glassEffect(.clear)
Image(systemName: "checkmark")
.font(.system(size: 36))
.frame(width: 80, height: 80)
.glassEffect(.clear.interactive())
.onTapGesture {
// do
}
}
HStack {
Button {
} label: {
Image(systemName: "checkmark")
.font(.system(size: 36))
.frame(width: 80, height: 80)
}
.buttonStyle(.glass)
Button {
} label: {
Image(systemName: "checkmark")
.font(.system(size: 36))
.frame(width: 80, height: 80)
}
.buttonStyle(.plain)
.glassEffect(.clear.interactive().tint(.blue.opacity(0.5)))
}
}
}
}
#Preview {
GlassView()
}This outputs glass effect across buttons, texts and images.