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.

Example

Demo.swift

ContentView.swift

App.swift

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()
}
  }
}