Background Blur with Materials in SwiftUI

Discover how to create a background blur effect and give more importance to your text in SwiftUI using the new materials.

Francesco Leoni

1 min read


iOS 15

iPadOS 15

Mac Catalyst 15

tvOS 15

watchOS 8

macOS 12

visionOS 1.0

Sometimes we need to add text on top of an image and, to make it stand out, it is useful to add a background that is in harmony with the image underneath.

Luckily, this task is made significantly simple with SwiftUI and can be achieved with the use of materials.


A material is not a view, is like inserting a translucent layer between the modified view and its background.

The blurring effect produced by the material isn’t simple transparency. It uses a platform-specific blending that produces a result that resembles frosted glass.


SwiftUI has a set of materials with different thicknesses. Thicker materials give better contrast for text and other views.

Materials available in SwiftUI are:

  • regular material
  • thin material
  • ultra-thin material
  • thick material
  • ultra-thick material
  • bar


To apply a material to a view background, you need to use the background(_:ignoresSafeAreaEdges:) modifier.

Text("Ultra thin material")


Shaped material

To shape the background material you can use the background(_:in:fillStyle:) modifier.

Passing a Shape object to the second parameter of the modifier.

Text("Ultra thin material")



in: RoundedRectangle(cornerRadius: 8, style: .continuous)


Dark mode

These materials automatically support both the light and dark modes.

Here is a list of all the available materials in SwiftUI.


If you have any question about this article, feel free to email me or tweet me @franceleonidev and share your opinion.

Thank you for reading and see you in the next article!

Share this article

Related articles

Combine CoreData and SwiftUI

See how to use CoreData database with SwiftUI. Syncing changes from CoreData to every View of your app.

5 min read


SwiftData the Successor of CoreData Explained with SwiftUI

Discover the SwiftData framework built on top of CoreData. Save and fetch data locally. Available for Xcode 15, Swift and SwiftUI.

5 min read


Make your Chart Scrollable with SwiftUI Charts (iOS 17)

Discover the new SwiftUI Charts APIs that enables you to create scrollable chart easily. Available for Xcode 15 and iOS 17.

2 min read