--- title: "Background Extension Effect | Explore SwiftUI" description: "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" canonical_url: "https://exploreswiftui.com/library/view/background-extension-effect" meta: author: "Explore SwiftUI" "og:description": "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" "og:image": "https://exploreswiftui.com/_og/d/c_Component%2Ctitle_Background%2BExtension%2BEffect%2Cdescription_~QWRkcyB0aGUgYmFja2dyb3VuZCBleHRlbnNpb24gZWZmZWN0IHRvIHRoZSB2aWV3LiBUaGUgdmlldyB3aWxsIGJlIGR1cGxpY2F0ZWQgaW50byBtaXJyb3JlZCBjb3BpZXMgd2hpY2ggd2lsbCBiZSBwbGFjZWQgYXJvdW5kIHRoZSB2aWV3IG9uIGFueSBlZGdlIHdpdGggYXZhaWxhYmxlIHNhZmUgYXJlYS4gQWRkaXRpb25hbGx5LCBhIGJsdXIgZWZmZWN0IHdpbGwgYmUgYXBwbGllZCBvbiB0b3AgdG8gYmx1ciBvdXQgdGhlIGNvcGllcw%2Ccategory_View%2Cimage_~L2FwaS9pbWFnZXMvOTEvdmFyaWFudHMvNDIyP3Y9MTc5MDA3MzQ3ODg0MiZyPTImdz02NDAmaD00ODAmZj1wbmc%2CimageMode_fit%2CimagePosition_center%2CimageFrame_~Ym9yZGVyLXJhZGl1czogMTJweCAwcHggMHB4IDEycHg7IGJvcmRlcjogMXB4IHNvbGlkIHJnYmEoMCwwLDAsMC4wNik7IGJvcmRlci1yaWdodDogMDsgYm94LXNoYWRvdzogMCAtMTBweCA1MHB4IHJnYmEoMzcsOTksMjM1LDAuMTgpOw%2Cprops_eyJwbGF0Zm9ybXMiOlsiaU9TIiwiaVBhZE9TIiwibWFjT1MiLCJ3YXRjaE9TIiwidHZPUyIsInZpc2lvbk9TIl19%2Cp_Ii9saWJyYXJ5L3ZpZXcvYmFja2dyb3VuZC1leHRlbnNpb24tZWZmZWN0Ig%2Cs_tYpzSqCSQgA4Q3cM.png" "og:image:height": "630" "og:image:type": image/png "og:image:width": "1200" "og:title": "Background Extension Effect | Explore SwiftUI" "twitter:description": "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" "twitter:image": "https://exploreswiftui.com/_og/d/c_Component%2Ctitle_Background%2BExtension%2BEffect%2Cdescription_~QWRkcyB0aGUgYmFja2dyb3VuZCBleHRlbnNpb24gZWZmZWN0IHRvIHRoZSB2aWV3LiBUaGUgdmlldyB3aWxsIGJlIGR1cGxpY2F0ZWQgaW50byBtaXJyb3JlZCBjb3BpZXMgd2hpY2ggd2lsbCBiZSBwbGFjZWQgYXJvdW5kIHRoZSB2aWV3IG9uIGFueSBlZGdlIHdpdGggYXZhaWxhYmxlIHNhZmUgYXJlYS4gQWRkaXRpb25hbGx5LCBhIGJsdXIgZWZmZWN0IHdpbGwgYmUgYXBwbGllZCBvbiB0b3AgdG8gYmx1ciBvdXQgdGhlIGNvcGllcw%2Ccategory_View%2Cimage_~L2FwaS9pbWFnZXMvOTEvdmFyaWFudHMvNDIyP3Y9MTc5MDA3MzQ3ODg0MiZyPTImdz02NDAmaD00ODAmZj1wbmc%2CimageMode_fit%2CimagePosition_center%2CimageFrame_~Ym9yZGVyLXJhZGl1czogMTJweCAwcHggMHB4IDEycHg7IGJvcmRlcjogMXB4IHNvbGlkIHJnYmEoMCwwLDAsMC4wNik7IGJvcmRlci1yaWdodDogMDsgYm94LXNoYWRvdzogMCAtMTBweCA1MHB4IHJnYmEoMzcsOTksMjM1LDAuMTgpOw%2Cprops_eyJwbGF0Zm9ybXMiOlsiaU9TIiwiaVBhZE9TIiwibWFjT1MiLCJ3YXRjaE9TIiwidHZPUyIsInZpc2lvbk9TIl19%2Cp_Ii9saWJyYXJ5L3ZpZXcvYmFja2dyb3VuZC1leHRlbnNpb24tZWZmZWN0Ig%2Cs_tYpzSqCSQgA4Q3cM.png" "twitter:title": "Background Extension Effect | Explore SwiftUI" --- > Index of every page on this site: [llms.txt](https://exploreswiftui.com/llms.txt) **Interactive previews**[ iPad](https://exploreswiftui.com/ipad?element=91) # **Background Extension Effect** 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 ![Background Extension Effect - Preview Not Available](https://exploreswiftui.com/api/images/91/variants/422?v=1790073478842&r=2&w=800&q=80&f=webp) ### **Platform Compatibility** iOS 26.0+ iPadOS 26.0+ macOS 26.0+ watchOS 26.0+ tvOS 26.0+ visionOS 26.0+ ### **Tags** ### **SwiftUI Code** [ Docs]() ``` NavigationSplitView { } detail: { ZStack { VStack(spacing: 0) { Image(.cats) .resizable() .aspectRatio(contentMode: .fill) .frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity) .frame(maxHeight: .infinity) Image(.cats) .resizable() .aspectRatio(contentMode: .fill) .frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity) .backgroundExtensionEffect() .frame(maxHeight: .infinity) } } } ``` ### **Found an issue or have a suggestion?** Created: June 10, 2025Updated: December 28, 2025 ![Connect Wizard](https://exploreswiftui.com/_ipx/f_webp&q_80&s_48x48/images/connect-wizard-icon.png) **Connect Wizard** **Unlock insights App Store Connect doesn’t show you.** [** Get Started **](https://apps.apple.com/app/apple-store/id6747314580?pt=121213751&ct=Explore%20SwiftUI%20Banner&mt=8) ### **More View Components ** [**View all **](https://exploreswiftui.com/library/view) ![VisionOS background materials - visionOS - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/260/variants/2143?v=1793707679045&r=2&w=412&q=75&f=webp) ### **VisionOS background materials** All background materials on visionOS ![Container Content Margins - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/257/variants/1987?v=1792070676534&r=2&w=412&q=75&f=webp) ### **Container Content Margins** Adds the margins of the container the view is in. ![Toolbar Vertical Edge - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/254/variants/1863?v=1790589836833&r=2&w=412&q=75&f=webp) ### **Toolbar Vertical Edge** This value reflects the system’s preferred edge for the vertical bar in the current context, regardless of whether a vertical bar is currently visible. Use it to position custom bars or other UI relative to the system’s bar placement. ![Hinge State - iOS on iPhone Duo - Landscape - Fully Open - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/249/variants/1765?v=1793099575627&r=2&w=412&q=75&f=webp) ### **Hinge State** A type encapsulating the state of a single hinge. ![Disabled Toolbar Vertical Behavior - iOS on iPhone Duo - Landscape - Fully Open - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/246/variants/1636?v=1790277107518&r=2&w=412&q=75&f=webp) ### **Disabled Toolbar Vertical Behavior** Disables the vertical bar. ![Music Picker - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/232/variants/727?v=1790073478842&r=2&w=412&q=75&f=webp) ### **Music Picker** Presents a music picker to select items from the Apple Music catalog and the user’s music library. ![App Store Overlay - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/224/variants/269?v=1790073478842&r=2&w=412&q=75&f=webp) ### **App Store Overlay** Presents a StoreKit overlay when a given condition is true. ![Manage Subscriptions Sheet - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/223/variants/241?v=1790073478842&r=2&w=412&q=75&f=webp) ### **Manage Subscriptions Sheet** Opens the manage subscriptions sheet. ### **Explore Other Components ** [**Browse all **](https://exploreswiftui.com/) ![Hard ScrollEdgeEffect - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/83/variants/320?v=1790073478842&r=2&w=412&q=75&f=webp) ### **Hard ScrollEdgeEffect** A scroll edge effect with a hard cutoff and dividing line ![WheelPickerStyle - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/186/variants/604?v=1790073478842&r=2&w=412&q=75&f=webp) ### **WheelPickerStyle** A picker style that presents the options in a scrollable wheel that shows the selected option and a few neighboring options. ![Slider Color - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/52/variants/335?v=1790073478842&r=2&w=412&q=75&f=webp) ### **Slider Color** Customizing the color of the slider ![Multiple Sources Picker - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/175/variants/568?v=1790073478842&r=2&w=412&q=75&f=webp) ### **Multiple Sources Picker** Creates a picker that updates the selected property for all sources. ![Picker Divider - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/177/variants/540?v=1790073478842&r=2&w=412&q=75&f=webp) ### **Picker Divider** A Picker with a Divider ![PalettePickerStyle - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/184/variants/598?v=1790073478842&r=2&w=412&q=75&f=webp) ### **PalettePickerStyle** A picker style that presents the options as a row of compact elements. When used outside of menus, this style is rendered as a segmented picker. If that is the intended usage, consider segmented instead. ![List Badge Prominence - iOS on iPhone - Portrait - Flat Design - Light Mode - Preview](https://exploreswiftui.com/api/images/124/variants/353?v=1790073478842&r=2&w=412&q=75&f=webp) ### **List Badge Prominence** Specifies the prominence of badges created by this view. ![Custom Slider Ticks - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/86/variants/375?v=1790073478842&r=2&w=412&q=75&f=webp) ### **Custom Slider Ticks** Creates a slider to select a value from a given range, subject to a step increment, which displays the provided labels and customizable ticks. ```json {"@context":"https://schema.org","@graph":[{"@id":"https://exploreswiftui.com/#website","@type":"WebSite","description":"A visual library for SwiftUI APIs, components, and modifiers","inLanguage":"en-US","name":"Explore SwiftUI","url":"https://exploreswiftui.com/","publisher":{"@id":"https://exploreswiftui.com/#identity"}},{"@id":"https://exploreswiftui.com/library/view/background-extension-effect#webpage","@type":"WebPage","dateModified":"2025-12-28T10:04:56.188Z","datePublished":"2025-06-10T12:55:53.465Z","description":"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","name":"Background Extension Effect","url":"https://exploreswiftui.com/library/view/background-extension-effect","breadcrumb":{"@id":"https://exploreswiftui.com/library/view/background-extension-effect#breadcrumb"},"isPartOf":{"@id":"https://exploreswiftui.com/#website"},"potentialAction":[{"@type":"ReadAction","target":["https://exploreswiftui.com/library/view/background-extension-effect"]}],"primaryImageOfPage":{"@id":"https://exploreswiftui.com/#logo"}},{"@id":"https://exploreswiftui.com/#identity","@type":"Organization","description":"A visual library for SwiftUI APIs, components, and modifiers","name":"Explore SwiftUI","url":"https://exploreswiftui.com","logo":{"@id":"https://exploreswiftui.com/#logo"},"sameAs":["https://x.com/Typ0genius","https://mastodon.social/@Typ0genius"]},{"@id":"https://exploreswiftui.com/library/view/background-extension-effect#article","dateModified":"2025-12-28T10:04:56.188Z","datePublished":"2025-06-10T12:55:53.465Z","description":"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","headline":"Background Extension Effect","inLanguage":"en-US","name":"Background Extension Effect","thumbnailUrl":"https://exploreswiftui.com/api/images/91/variants/422?v=1790073478842&r=2","url":"https://exploreswiftui.com/library/view/background-extension-effect","@type":["Article","TechArticle"],"about":{"@type":"Thing","name":"SwiftUI"},"author":{"@id":"https://exploreswiftui.com/#identity"},"image":{"@id":"https://exploreswiftui.com/#/schema/image/1"},"isPartOf":{"@type":"WebSite","name":"Explore SwiftUI","url":"https://exploreswiftui.com"},"mainEntityOfPage":{"@id":"https://exploreswiftui.com/library/view/background-extension-effect#webpage"},"publisher":{"@id":"https://exploreswiftui.com/#identity"}},{"@id":"https://exploreswiftui.com/library/view/background-extension-effect#/schema/software-source-code/1","@type":"SoftwareSourceCode","codeRepository":"https://developer.apple.com/documentation/swiftui/view/backgroundextensioneffect()","codeSampleType":"full example","description":"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","name":"Background Extension Effect SwiftUI Example","programmingLanguage":"Swift","runtimePlatform":"SwiftUI","text":"NavigationSplitView {\n} detail: {\n ZStack {\n VStack(spacing: 0) {\n Image(.cats)\n .resizable()\n .aspectRatio(contentMode: .fill)\n .frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity)\n .frame(maxHeight: .infinity)\n\n Image(.cats)\n .resizable()\n .aspectRatio(contentMode: .fill)\n .frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity)\n .backgroundExtensionEffect()\n .frame(maxHeight: .infinity)\n }\n }\n}","about":[{"@type":"Thing","name":"SwiftUI"},{"@type":"Thing","name":"View"},{"@type":"Thing","name":"Background Extension Effect"}]},{"@id":"https://exploreswiftui.com/library/view/background-extension-effect#breadcrumb","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","name":"Home","item":"https://exploreswiftui.com","position":1},{"@type":"ListItem","name":"View","item":"https://exploreswiftui.com/library/view","position":2},{"@type":"ListItem","name":"Background Extension Effect","item":"https://exploreswiftui.com/library/view/background-extension-effect","position":3}]},{"@id":"https://exploreswiftui.com/#logo","@type":"ImageObject","caption":"Explore SwiftUI","contentUrl":"https://exploreswiftui.com/apple-touch-icon.png","inLanguage":"en","url":"https://exploreswiftui.com/apple-touch-icon.png"},{"@id":"https://exploreswiftui.com/#/schema/image/1","@type":"ImageObject","contentUrl":"https://exploreswiftui.com/api/images/91/variants/422?v=1790073478842&r=2","inLanguage":"en","url":"https://exploreswiftui.com/api/images/91/variants/422?v=1790073478842&r=2"}]} ```