Blur and Materials (SwiftUI)

Two tools for translucency: the blur view modifier applies a raw gaussian blur to any view, and the Material type (SwiftUI Release 3, iOS 15+) provides the system's glass-like blur styles from the Human Interface Guidelines. Prefer a material for backgrounds; use blur for custom effects.

The blur Modifier

blur(radius:opaque:) blurs the rendering of the view it is attached to. radius sets the radial size; opaque (default false) tells the renderer whether to allow transparency.

Text("Hello")
  .padding()
  .background {
    Color.black
      .blur(radius: 8, opaque: false)
  }

Materials

A material is not a view. Attaching one inserts a translucent layer between a view and its background, with an environment-defined mix that reads as glass rather than plain transparency. It blurs the background while leaving the foreground content sharp, and it adapts to light and dark mode automatically.

Text("Hello")
  .padding()
  .background(
    .regularMaterial,
    in: RoundedRectangle(cornerRadius: 8, style: .continuous)
  )

Five thicknesses exist: ultraThinMaterial, thinMaterial, regularMaterial, thickMaterial, and ultraThickMaterial. Thicker materials give text and controls on top of them better contrast, so pick thickness by the legibility the foreground needs, not by taste.

One boundary to remember: a material blurs the app's own background only, never the content behind the app. A widget's material does not pick up the Home Screen wallpaper behind it.