<!--
{
  "availability" : [
    "iOS: 26.0.0 -",
    "iPadOS: 26.0.0 -",
    "macCatalyst: 26.0.0 -",
    "macOS: 26.0.0 -",
    "tvOS: 26.0.0 -",
    "visionOS: 26.0.0 -",
    "watchOS: 26.0.0 -"
  ],
  "documentType" : "symbol",
  "framework" : "SwiftUI",
  "identifier" : "/documentation/SwiftUI/View/backgroundExtensionEffect()",
  "metadataVersion" : "0.1.0",
  "role" : "Instance Method",
  "symbol" : {
    "kind" : "Instance Method",
    "modules" : [
      "SwiftUI"
    ],
    "preciseIdentifier" : "s:7SwiftUI4ViewPAAE25backgroundExtensionEffectQryF"
  },
  "title" : "backgroundExtensionEffect()"
}
-->

# backgroundExtensionEffect()

Adds the background extension effect to the view. The view will be
duplicated into mirrored copies which will be placed around the view on
any edge with available safe area. Additionally, a blur effect will be
applied on top to blur out the copies.

```
@MainActor @preconcurrency func backgroundExtensionEffect() -> some View
```

## Discussion

Use this modifier when you want to extend the view beyond its bounds so
the copies can function as backgrounds for other elements on top. The
most common use case is to apply this to a view in the detail column of
a navigation split view so it can extend under the sidebar or inspector
region to provide seamless immersive visuals.

```
NavigationSplitView {
    // sidebar content
} detail: {
    ZStack {
        BannerView()
            .backgroundExtensionEffect()
    }
}
.inspector(isPresented: $showInspector) {
    // inspector content
}
```

Apply this modifier with discretion. This should often be used with only
a single instance of background content with consideration of visual
clarity and performance.

> Note: This modifier will clip the view to prevent copies from
> overlapping with each other.

---

Copyright &copy; 2026 Apple Inc. All rights reserved. | [Terms of Use](https://www.apple.com/legal/internet-services/terms/site.html) | [Privacy Policy](https://www.apple.com/privacy/privacy-policy)