BackGround Blur with Materials

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

Struggling to make text pop on images in SwiftUI? Materials lets you add a harmonious background, simplifying a common design challenge.

SwiftUI's materials add a translucent layer blurred for backgrounds, resembling frosted glass. This goes beyond simple transparency, creating a more visually appealing effect.

# Materials

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

List of Materials :

  • Regular Material
  • Thin Material
  • Thick Material
  • Ultra-thin Material
  • Ultra-thick Material
  • Bar

# Usage

To Apply a material to a View Background, you need to use the .background(.ignoreSafeArea)modifer.

Text("Ultra thin material")
   .background(.ultraThinMaterial)

# 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")
   .background(
      .ultraThinMaterial,
      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.

Thank you for reading this Article