Design system for creating premium glass UI using iOS 26 native Liquid Glass APIs (.glassEffect modifier) or fallback gradient-based approaches for older iOS versions. Use when building SwiftUI iOS apps with glassmorphism, premium UI, translucent cards, or modern Apple-style interfaces. Triggers on requests for liquid glass, glassmorphism, iOS 26 design, premium UI, or translucent interfaces.
A comprehensive design system for creating premium glass interfaces. Supports iOS 26+ native Liquid Glass (glassEffect) and provides fallback patterns for iOS 17-18.
The "glass" effect in iOS 26 is NOT gradients and shadows. It's a physically-accurate lensing system that samples the background and creates real-time refraction effects.
Glass needs colorful/dark backgrounds - Unlike gradient-based glass that works on any background, native liquid glass samples what's behind it. On a plain white background, glass appears nearly invisible.
Use .ultraThinMaterial + .glassEffect() - The material provides the frosted base, the glassEffect adds the liquid refraction.
Interactive feedback is built-in - provides touch scaling/bouncing animations automatically.
.glassEffect(.regular.interactive())| iOS Version | Approach |
|---|---|
| iOS 26+ | Native .glassEffect() modifier with .ultraThinMaterial |
| iOS 17-18 | Gradient-based fallback with .ultraThinMaterial or custom gradients |
// The iOS 26 glass pattern
.background(.ultraThinMaterial, in: RoundedRectangle(cornerRadius: 16))
.glassEffect(.regular, in: RoundedRectangle(cornerRadius: 16))
| Variant | Usage |
|---|---|
.regular | Standard glass for cards, containers |
.regular.tint(color) | Adds color tint to the glass |
.regular.interactive() | Enables touch feedback animations |
.clear | More transparent, for media-rich backgrounds |
Button(action: action) {
HStack {
Image(systemName: "play.fill")
Text("Start")
}
.padding()
.foregroundStyle(.white)
.background(LinearGradient.brandGradient)
.clipShape(RoundedRectangle(cornerRadius: 16))
.glassEffect(
.regular.tint(.brandPrimary).interactive(),
in: RoundedRectangle(cornerRadius: 16)
)
}
Glass needs something to sample. Create rich backgrounds:
// Rich gradient background for glass to sample
struct BrandBackgroundModifier: ViewModifier {
func body(content: Content) -> some View {
content
.background {
ZStack {
// Deep base color
Color(hex: "0A0A1A")
// Animated gradient orbs
Circle()
.fill(RadialGradient(
colors: [.brandPrimary.opacity(0.4), .clear],
center: .center,
startRadius: 0,
endRadius: 200
))
.frame(width: 400, height: 400)
.offset(x: -100, y: -150)
Circle()
.fill(RadialGradient(
colors: [.brandSecondary.opacity(0.3), .clear],
center: .center,
startRadius: 0,
endRadius: 180
))
.frame(width: 360, height: 360)
.offset(x: 120, y: 200)
}
.ignoresSafeArea()
}
}
}
When targeting older iOS versions, use gradient-based glass:
struct GlassCardFallback<Content: View>: View {
let content: Content
var body: some View {
content
.padding(24)
.background(
LinearGradient(
colors: [.white, Color.surfaceWarm.opacity(0.3)],
startPoint: .top,
endPoint: .bottom
)
)
.clipShape(RoundedRectangle(cornerRadius: 16))
.shadow(color: .black.opacity(0.08), radius: 10, y: 4)
}
}
struct GlassCard<Content: View>: View {
let content: Content
var body: some View {
if #available(iOS 26.0, *) {
content
.padding(24)
.background(.ultraThinMaterial, in: RoundedRectangle(cornerRadius: 16))
.glassEffect(.regular, in: RoundedRectangle(cornerRadius: 16))
} else {
content
.padding(24)
.background(.ultraThinMaterial)
.clipShape(RoundedRectangle(cornerRadius: 16))
}
}
}