---
title: Material
framework: swiftui
role: symbol
role_heading: Structure
path: swiftui/material
---

# Material

A background material type.

## Declaration

```swift
struct Material
```

## Overview

Overview You can apply a blur effect to a view that appears behind another view by adding a material with the 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 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 material isn’t a view, but adding a material is like inserting a translucent layer between the modified view and its background:

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

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:

If you need a material to have a particular shape, you can use the 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)) }

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(_:) to set a custom foreground style — excluding the hierarchical styles, like secondary — 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](swiftui/material/ultrathin.md)
- [thin](swiftui/material/thin.md)
- [regular](swiftui/material/regular.md)
- [thick](swiftui/material/thick.md)
- [ultraThick](swiftui/material/ultrathick.md)
- [bar](swiftui/material/bar.md)

### Instance Methods

- [materialActiveAppearance(_:)](swiftui/material/materialactiveappearance(_:).md)

## Relationships

### Conforms To

- [Copyable](swift/copyable.md)
- [Escapable](swift/escapable.md)
- [Sendable](swift/sendable.md)
- [SendableMetatype](swift/sendablemetatype.md)
- [ShapeStyle](swiftui/shapestyle.md)

## See Also

### Supporting types

- [AngularGradient](swiftui/angulargradient.md)
- [EllipticalGradient](swiftui/ellipticalgradient.md)
- [LinearGradient](swiftui/lineargradient.md)
- [RadialGradient](swiftui/radialgradient.md)
- [ImagePaint](swiftui/imagepaint.md)
- [HierarchicalShapeStyle](swiftui/hierarchicalshapestyle.md)
- [HierarchicalShapeStyleModifier](swiftui/hierarchicalshapestylemodifier.md)
- [ForegroundStyle](swiftui/foregroundstyle.md)
- [BackgroundStyle](swiftui/backgroundstyle.md)
- [SelectionShapeStyle](swiftui/selectionshapestyle.md)
- [SeparatorShapeStyle](swiftui/separatorshapestyle.md)
- [TintShapeStyle](swiftui/tintshapestyle.md)
- [FillShapeStyle](swiftui/fillshapestyle.md)
- [LinkShapeStyle](swiftui/linkshapestyle.md)
- [PlaceholderTextShapeStyle](swiftui/placeholdertextshapestyle.md)