<!--
{
  "availability" : [
    "iOS: 15.0.0 -",
    "iPadOS: 15.0.0 -",
    "macCatalyst: 15.0.0 -",
    "macOS: 12.0.0 -",
    "tvOS: 15.0.0 -",
    "visionOS: 1.0.0 -",
    "watchOS: 8.0.0 -"
  ],
  "documentType" : "symbol",
  "framework" : "SwiftUI",
  "identifier" : "/documentation/SwiftUI/Material",
  "metadataVersion" : "0.1.0",
  "role" : "Structure",
  "symbol" : {
    "kind" : "Structure",
    "modules" : [
      "SwiftUI"
    ],
    "preciseIdentifier" : "s:7SwiftUI8MaterialV"
  },
  "title" : "Material"
}
-->

# Material

A background material type.

```
struct Material
```

## Overview

You can apply a blur effect to a view that appears behind another view by
adding a material with the [`background(_:ignoresSafeAreaEdges:)`](/documentation/SwiftUI/View/background(_:ignoresSafeAreaEdges:))
modifier:

```
ZStack {
    Color.teal
    Label("Flag", systemImage: "flag.fill")
        .padding()
        .background(.regularMaterial)
}
```

In the example above, the [`ZStack`](/documentation/SwiftUI/ZStack) layers a [`Label`](/documentation/SwiftUI/Label) on top of the color
[`teal`](/documentation/SwiftUI/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](images/com.apple.SwiftUI/Material-1@2x.png)

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,](images/com.apple.SwiftUI/Material-2@2x.png)

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](images/com.apple.SwiftUI/Material-3@2x.png)

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](images/com.apple.SwiftUI/Material-4@2x.png)

If you need a material to have a particular shape, you can use the
[`background(_:in:fillStyle:)`](/documentation/SwiftUI/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](images/com.apple.SwiftUI/Material-5@2x.png)

When you add a material, foreground elements exhibit vibrancy,
a context-specific blend of the foreground and background colors
that improves contrast. However using [`foregroundStyle(_:)`](/documentation/SwiftUI/View/foregroundStyle(_:))
to set a custom foreground style — excluding the hierarchical styles,
like [`secondary`](/documentation/SwiftUI/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.

## Topics

### Getting material types

[`ultraThin`](/documentation/SwiftUI/Material/ultraThin)

A mostly translucent material.

[`thin`](/documentation/SwiftUI/Material/thin)

A material that’s more translucent than opaque.

[`regular`](/documentation/SwiftUI/Material/regular)

A material that’s somewhat translucent.

[`thick`](/documentation/SwiftUI/Material/thick)

A material that’s more opaque than translucent.

[`ultraThick`](/documentation/SwiftUI/Material/ultraThick)

A mostly opaque material.

[`bar`](/documentation/SwiftUI/Material/bar)

A material matching the style of system toolbars.


---

Copyright &copy; 2026 Apple Inc. All rights reserved. | [Terms of Use](https://www.apple.com/legal/internet-services/terms/site.html) | [Privacy Policy](https://www.apple.com/privacy/privacy-policy)