SwiftUI Styling Materials

SwiftUI Styling Materials

Use built-in blur materials like .regularMaterial to create depth and visual hierarchy.

Use materials to add depth

Materials are frosted blur effects that add depth and visual hierarchy to your app.

The difference between materials is their opacity and blur amount.

The most common materials are:

• .regularMaterial - Frosted blur with a medium amount of blur and opacity.
• .thickMaterial - Frosted blur with a thick amount of blur and opacity.
• .thinMaterial - Frosted blur with a thin amount of blur and opacity.

Apply a material fill (for example .regularMaterial) to create a frosted backdrop behind content.

import SwiftUI

struct MaterialCard: View {
  var body: some View {
    ZStack {
      Image(systemName: "photo.fill").resizable().scaledToFill().ignoresSafeArea()
      RoundedRectangle(cornerRadius: 12).fill(.regularMaterial)
        .frame(height: 120)
        .overlay(Text("Regular Material").font(.headline))
        .padding()
    }
  }
}

import SwiftUI

struct ContentView: View {
  var body: some View { MaterialCard() }
}

import SwiftUI

@main
struct MyApp: App {
  var body: some Scene {
    WindowGroup { ContentView() }
  }
}

The example above shows a frosted backdrop behind content.