SwiftUI Visual Effects
  • July 1, 2025

View modifiers that wrap UIVisualEffectView and all of its associated objects, with environment integration for storing effect styles. Vibrancy effects will always use the current blur effect style for proper vibrancy-effect layering.

Adding and Styling a Blur Effect

YourView()
// Add a blur effect.
.blurEffect()
// Style the blur effect.
.blurEffectStyle(.systemChromeMaterial)

Adding and Styling a Vibrancy Effect

YourView()
// Add a vibrancy effect.
.vibrancyEffect()
// Style the vibrancy effect.
.vibrancyEffectStyle(.fill)

Adding and Styling Blur and Vibrancy Effects

ZStack {
YourBackgroundContent()
// Add a blur effect.
.blurEffect()

YourForegroundContent()
// Add a vibrancy effect.
.vibrancyEffect()
}
// Set the style for blur effects within this view.
.blurEffectStyle(.systemChromeMaterial)
// Set the style for vibrancy effects within this view.
.vibrancyEffectStyle(.fill)

Adding Blur and Vibrancy Effects Directly to a View


Adding both a blur and vibrancy effect directly to a view only displays the blur effect.

If you’d like to blur the view’s background content, while adding vibrancy to the view’s foreground content, use the .background() modifier, and pass BlurEffect() as its argument. Although BlurEffect may not be very Apple-like, it’s better than the .blurEffect() modifier implementation below.

YourView()
.vibrancyEffect()
.background(BlurEffect())

// as opposed to:

YourView()
.vibrancyEffect()
.background(
Color.clear
.blurEffect()
)

GitHub


View Github

#apple #ios #swift #uikit
YOU MIGHT ALSO LIKE...
🧭 NavigationKit

NavigationKit is a lightweight library which makes SwiftUI navigation super easy to use. 💻 Installation 📦 Swift Package Manager Using Swift Package Manager, add ...

swiftui-navigation-stack

An alternative SwiftUI NavigationView implementing classic stack-based navigation giving also some more control on animations and programmatic navigation. NavigationStack Installation ...

Stinsen

Simple, powerful and elegant implementation of the Coordinator pattern in SwiftUI. Stinsen is written using 100% SwiftUI which makes it ...

SwiftUI Router

With SwiftUI Router you can power your SwiftUI app with path-based routing. By utilizing a path-based system, navigation in your app becomes ...

FlowStacks

This package takes SwiftUI's familiar and powerful NavigationStack API and gives it superpowers, allowing you to use the same API not just ...