DEV Community

Sebastien Lato
Sebastien Lato

Posted on

How to Build Apple-Style Glassmorphic UI in SwiftUI

#swift #ios #swiftui #ui

Glass UI is one of the most modern, premium-looking design styles used across iOS and macOS.

You see it in:

  • Control Center
  • Apple Music
  • Widgets
  • Lock Screen
  • Shortcuts
  • Safari tab switcher

It adds depth, blur, translucency, and subtle neon glow — all while remaining clean and minimal.

In this tutorial, we’ll build production-ready glassmorphic components with pure SwiftUI.

🎯 What We'll Build

  1. Glass Card — frosted blur + depth + subtle shadow
  2. Glass Button — neon glow + hover lighting
  3. Glass Floating Panel — Apple Music/Lock Screen style
  4. Glass Background Section — layered materials + gradients

No UIKit. No hacks. Just clean SwiftUI.

🧠 Key Technique: The Material System

SwiftUI’s .material styles are real-time, dynamic blurs:

  • .ultraThinMaterial
  • .thinMaterial
  • .regularMaterial
  • .thickMaterial
  • .ultraThickMaterial

For glass UI, we rely on:

.background(.ultraThinMaterial)
Enter fullscreen mode Exit fullscreen mode

and layer it with:

  • rounded corners
  • gradients
  • shadows
  • strokes (1px white or translucent)

🟦 1) Glass Card Component 

struct GlassCard<Content: View>: View {
    @ViewBuilder var content: () -> Content

    var body: some View {
        content()
            .padding(20)
            .frame(maxWidth: .infinity)
            .background(.ultraThinMaterial)
            .clipShape(RoundedRectangle(cornerRadius: 22, style: .continuous))
            .overlay(
                RoundedRectangle(cornerRadius: 22, style: .continuous)
                    .stroke(Color.white.opacity(0.25), lineWidth: 1)
            )
            .shadow(color: Color.black.opacity(0.15), radius: 20, y: 10)
    }
}
Enter fullscreen mode Exit fullscreen mode

Use it:

GlassCard {
    VStack(alignment: .leading, spacing: 12) {
        Text("Glassmorphic Card")
            .font(.title3.bold())
        Text("A clean, translucent card with depth and subtle highlights.")
            .foregroundColor(.secondary)
    }
    .frame(maxWidth: .infinity, alignment: .leading)
}
.padding()
Enter fullscreen mode Exit fullscreen mode

🔵 2) Glass Button (Neon Glow) 

struct GlassButton: View {
    var title: String
    var action: () -> Void

    var body: some View {
        Button(action: action) {
            Text(title)
                .font(.headline)
                .padding(.horizontal, 26)
                .padding(.vertical, 14)
                .background(.ultraThinMaterial)
                .clipShape(RoundedRectangle(cornerRadius: 16, style: .continuous))
                .overlay(
                    RoundedRectangle(cornerRadius: 16)
                        .stroke(Color.white.opacity(0.3), lineWidth: 1)
                )
                .shadow(color: .blue.opacity(0.35), radius: 20)
        }
    }
}
Enter fullscreen mode Exit fullscreen mode

This gives a soft neon glow, clean edges, and depth.

🟪 3) Floating Glass Panel (Apple Music Style) 

struct FloatingGlassPanel<Content: View>: View {
    @ViewBuilder var content: () -> Content

    var body: some View {
        VStack(spacing: 0) {
            Capsule()
                .fill(Color.white.opacity(0.25))
                .frame(width: 40, height: 6)
                .padding(.top, 10)

            content()
                .padding()
        }
        .frame(maxWidth: .infinity)
        .background(.regularMaterial)
        .clipShape(RoundedRectangle(cornerRadius: 28, style: .continuous))
        .shadow(color: .black.opacity(0.25), radius: 30, y: 14)
    }
}
Enter fullscreen mode Exit fullscreen mode

Example usage:

FloatingGlassPanel {
    VStack(alignment: .leading, spacing: 16) {
        Text("Now Playing")
            .font(.title2.bold())
        Text("This floating glass panel mimics the feel of Apple Music.")
            .foregroundColor(.secondary)
    }
}
.padding()
Enter fullscreen mode Exit fullscreen mode

🌁 4) Glass Background Layer (Depth Stack) 

struct GlassBackground: View {
    var body: some View {
        LinearGradient(colors: [.blue.opacity(0.4), .purple.opacity(0.4)],
                       startPoint: .topLeading,
                       endPoint: .bottomTrailing)
            .blur(radius: 30)
            .overlay(.ultraThinMaterial)
    }
}
Enter fullscreen mode Exit fullscreen mode

Perfect for lock-screen-style depth.

✔️ Final Result

You now have a full toolkit for building:

  • glass cards
  • glowing glass buttons
  • floating glass panels
  • background glass layers
  • frosted depth UI

All built with pure SwiftUI using Apple’s modern Material system.

These components elevate any app — dashboards, settings screens, music players, widgets, or onboarding.

Top comments (0)