Create immersive backgrounds in SwiftUI with backgroundExtensionEffect()

WWDC25 introduced a wave of visual and functional updates, from the new Liquid Glass design language to redesigned system apps and deeper SwiftUI integration across platforms. With the first iOS 26 betas now available, I’ve been exploring some of the new APIs, and one that immediately caught my eye is backgroundExtensionEffect().

This modifier is mentioned in the updated Human Interface Guidelines and WWDC sessions as a way to extend content behind the control layer. It’s designed for cases like showing content beneath sidebars, inspectors, toolbars, or custom controls, and it can add an immersive effect to SwiftUI interfaces.

The most obvious use case for backgroundExtensionEffect() is to apply it to a view in the detail column of a NavigationSplitView. We can use it on the graphic placed at the top of the detail view, and it will mirror and blur that content to continue its colors underneath the sidebar. This creates a sense of visual continuity, similar to what we see in some system apps, like Podcasts, for example.

In the code sample below, we are using this technique in a recipe detail view. The header image extends behind the sidebar using backgroundExtensionEffect(), making the layout feel more connected across the interface.

struct RecipeDetailView: View { let recipe: Recipe var body: some View { ScrollView { VStack(alignment: .leading) { Image(recipe.imageName) .resizable() .scaledToFill() .backgroundExtensionEffect() RecipeNameAndDescription(recipe: recipe) } } .ignoresSafeArea(edges: .top) } }

# Extend and blur images to create continuous backgrounds in cards

Another interesting effect we can achieve with a creative use of the new backgroundExtensionEffect() modifier is the kind of continuous background in cards sometimes seen in system apps. Instead of treating the image as a standalone element, we can extend and blur it to serve as a visual backdrop for overlay content like text or controls.

In the example below, we're building a horizontal scroll of recipe cards. Each card displays an image at the top, and by applying backgroundExtensionEffect(), we extend and blur that image into the surrounding safe area. To make use of this extended region, we place the text content inside a safeAreaInset() attached to the image itself. This lets us position labels or controls on top of the extended background without overlapping the original image bounds. To ensure readability across a variety of images, we also add a subtle linear gradient behind the text.

struct RecipeCards: View { let recipes: [Recipe] var body: some View { ScrollView(.horizontal) { HStack(spacing: 24) { ForEach(recipes) { recipe in RecipeCard(recipe: recipe) } } .padding() } } } struct RecipeCard: View { let recipe: Recipe var body: some View { Image(recipe.imageName) .resizable() .scaledToFill() .frame( minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity ) .backgroundExtensionEffect() .safeAreaInset(edge: .bottom) { RecipeNameAndDescription(recipe: recipe) .foregroundStyle(.white) .padding() .background( LinearGradient( colors: [ .black.opacity(0.6), .clear ], startPoint: .bottom, endPoint: .top ) ) } .clipShape( RoundedRectangle( cornerRadius: 26, style: .continuous ) ) .frame(width: 400) } }

This approach can work well in layouts where we layer text or controls over images, such as titles, labels, or playback indicators. The blurred extension softens the transition between the image and interface elements, helping the layout feel more unified and balanced. But as with any visual effect, it’s important to test that the content remains clear and legible across different images, themes, and contexts.

If you want to build a strong foundation in SwiftUI, my new book SwiftUI Fundamentals takes a deep dive into the framework’s core principles and APIs to help you understand how it works under the hood and how to use it effectively in your projects.

For more resources on Swift and SwiftUI, check out my other books and book bundles.

I’m currently running a WWDC 2025 promotion with 30% off my books, plus additional savings when purchased as a bundle. Visit the books page to learn more.