How to Build a Glass Morphism Login Form in SwiftUI

What You Will Build

A frosted-glass login form with .ultraThinMaterial floating over colorful gradient orbs. This is the glass morphism design trend applied to a practical login form.

Why This Pattern Matters

Glass morphism was popularized by macOS Big Sur and iOS Control Center. SwiftUI's .ultraThinMaterial makes it trivial compared to UIKit's UIVisualEffectView.

The Glass Card

VStack(spacing: 12) {
    Text("Welcome!").font(.title.bold())

    VStack(alignment: .leading, spacing: 8) {
        Text("Username").font(.callout.bold())
        TextField("user@email.com", text: $username)
            .padding(.vertical, 10).padding(.horizontal, 15)
            .background(.white.opacity(0.12))
            .clipShape(.rect(cornerRadius: 8))

        Text("Password").font(.callout.bold()).padding(.top, 15)
        SecureField("password", text: $password)
            .padding(.vertical, 10).padding(.horizontal, 15)
            .background(.white.opacity(0.12))
            .clipShape(.rect(cornerRadius: 8))

        Button("Login") { }
            .font(.title3.weight(.semibold))
            .foregroundStyle(.black)
            .padding(.vertical, 12)
            .frame(maxWidth: .infinity)
            .background(.white)
            .clipShape(.rect(cornerRadius: 8))
            .padding(.top, 30)
    }
}
.foregroundStyle(.white)
.environment(\.colorScheme, .dark)
.padding(.horizontal, 30).padding(.top, 35).padding(.bottom, 25)
.background {
    RoundedRectangle(cornerRadius: 10).fill(.ultraThinMaterial)
}
.background {
    RoundedRectangle(cornerRadius: 10)
        .stroke(.white.opacity(0.3), lineWidth: 1.5)
}

Background Orbs

ZStack {
    Circle()
        .fill(.linearGradient(colors: [.purple, .blue],
              startPoint: .top, endPoint: .bottom))
        .frame(width: 140, height: 140)
        .offset(x: -25, y: -55)
    Circle()
        .fill(.linearGradient(colors: [.orange, .red],
              startPoint: .top, endPoint: .bottom))
        .frame(width: 140, height: 140)
        .offset(x: 25, y: 55)
}

Tips

• .ultraThinMaterial vs .thinMaterial: Ultra-thin shows more color through blur.
• White border is essential to separate the card from background.
• .environment colorScheme .dark forces light text on dark materials.

iOS Version: iOS 15+