SwiftUICore · IOS API REFERENCE

Material

struct · iOS 15.0+ · SDK 27.1

struct Material

A background material type. You can apply a blur effect to a view that appears behind another view by adding a material with the ``View/background(_:ignoresSafeAreaEdges:)`` modifier: ZStack { Color.teal Label("Flag", systemImage: "flag.fill") .padding() .background(.regularMaterial) } In the example above, the ``ZStack`` layers a ``Label`` on top of the color ``ShapeStyle/teal``. The background modifier inserts the regular material below the label, blurring the part of the background that the label --- including its padding --- covers: ![A screenshot of a label on a teal background, where the area behind the label appears blurred.](Material-1) A material isn't a view, but adding a material is like inserting a translucent layer between the modified view and its background: ![An illustration that shows a background layer below a material layer, which in turn appears below a foreground layer.](Material-2) The blurring effect provided by the material isn't simple opacity. Instead, it uses a platform-specific blending that produces an effect that resembles heavily frosted glass. You can see this more easily with a complex background, like an image: ZStack { Image("chili_peppers") .resizable() .aspectRatio(contentMode: .fit) Label("Flag", systemImage: "flag.fill") .padding() .background(.regularMaterial) } ![A screenshot of a label on an image background, where the area behind the label appears blurred.](Material-3) For physical materials, the degree to which the background colors pass through depends on the thickness. The effect also varies with light and dark appearance: ![An array of labels on a teal background. The first column, labeled light appearance, shows a succession of labels on blurred backgrounds where the blur increases from top to bottom, resulting in lighter and lighter blur. The second column, labeled dark appearance, shows a similar succession of labels, except that the blur gets darker from top to bottom. The rows are labeled, from top to bottom: no material, ultra thin, thin, regular, thick, and ultra thick.](Material-4) If you need a material to have a particular shape, you can use the ``View/background(_:in:fillStyle:)`` modifier. For example, you can create a material with rounded corners: ZStack { Color.teal Label("Flag", systemImage: "flag.fill") .padding() .background(.regularMaterial, in: RoundedRectangle(cornerRadius: 8)) } ![A screenshot of a label on a teal background, where the area behind the label appears blurred. The blurred area has rounded corners.](Material-5) When you add a material, foreground elements exhibit vibrancy, a context-specific blend of the foreground and background colors that improves contrast. However using ``View/foregroundStyle(_:)`` to set a custom foreground style --- excluding the hierarchical styles, like ``ShapeStyle/secondary-swift.type.property`` --- disables vibrancy. > Note: A material blurs a background that's part of your app, but not what appears behind your app on the screen. For example, the content on the Home Screen doesn't affect the appearance of a widget.

Members (7)

get · iOS 15.0+

ultraThick

TypeScript

static get ultraThick(): Material

Swift declaration

static let ultraThick: Material

A mostly opaque material.

method · iOS 18.0+

materialActiveAppearance

TypeScript

materialActiveAppearance(appearance: MaterialActiveAppearance): Material

Swift declaration

func materialActiveAppearance(_ appearance: MaterialActiveAppearance) -> Material

Sets an explicit active appearance for this material. Materials used as the `window` container background on macOS will automatically appear inactive when their the window appears inactive, but can be made to always appear active by setting the active appearance behavior to be always active: Text("Hello, World!") .containerBackground( Material.regular.materialActiveAppearance(.active), for: .window)

get · iOS 15.0+

bar

TypeScript

static get bar(): Material

Swift declaration

static let bar: Material

A material matching the style of system toolbars.

get · iOS 15.0+

thin

TypeScript

static get thin(): Material

Swift declaration

static let thin: Material

A material that's more translucent than opaque.

get · iOS 15.0+

thick

TypeScript

static get thick(): Material

Swift declaration

static let thick: Material

A material that's more opaque than translucent.

get · iOS 15.0+

regular

TypeScript

static get regular(): Material

Swift declaration

static let regular: Material

A material that's somewhat translucent.

get · iOS 15.0+

ultraThin

TypeScript

static get ultraThin(): Material

Swift declaration

static let ultraThin: Material

A mostly translucent material.

Skipped declarations

No declarations were skipped in this snapshot.

All SwiftUICore types →