{"id":6664,"date":"2025-09-16T16:00:27","date_gmt":"2025-09-16T20:00:27","guid":{"rendered":"https:\/\/stepinto.vision\/?p=6664"},"modified":"2025-09-16T16:00:28","modified_gmt":"2025-09-16T20:00:28","slug":"spatial-swiftui-glassbackgroundeffect","status":"publish","type":"post","link":"https:\/\/stepinto.vision\/example-code\/spatial-swiftui-glassbackgroundeffect\/","title":{"rendered":"Spatial SwiftUI: glassBackgroundEffect"},"content":{"rendered":"\n<p>We can use this to add a glass background to any view.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Overview<\/h2>\n\n\n\n<p>I&#8217;m sure we all know how to add this <a href=\"https:\/\/developer.apple.com\/documentation\/swiftui\/view\/glassbackgroundeffect(displaymode:)\">modifier<\/a> to any view to add a glass background. This is helpful for plane windows, volumes, ornaments, and attachments.<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro cbp-has-line-numbers\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;--cbp-line-number-color:#000000;--cbp-line-number-width:calc(1 * 0.6 * .875rem);line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span role=\"button\" tabindex=\"0\" style=\"color:#000000;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>VStack {...}\n.glassBackgroundEffect()<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki light-plus\" style=\"background-color: #FFFFFF\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #000000\">VStack {...}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">.<\/span><span style=\"color: #795E26\">glassBackgroundEffect<\/span><span style=\"color: #000000\">()<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p>But it doesn&#8217;t stop there. This seemingly simple modifier has some powerful features. Consider this simple view hierarchy.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>VStack\n<ul class=\"wp-block-list\">\n<li>HStack\n<ul class=\"wp-block-list\">\n<li>Card View<\/li>\n\n\n\n<li>Model View<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>HStack\n<ul class=\"wp-block-list\">\n<li>Card View<\/li>\n\n\n\n<li>Model View<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<p>We could add<code>.glassBackgroundEffect<\/code> to the VStack and call it a day. That would wrap our view much like any default window in visionOS. What if we want to hide the glass on the VStack, but show it on the HStacks? We can use the <code>.implicit<\/code> display mode. This will only add the effect to a view when glass is not present further up the hierarchy.<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro cbp-has-line-numbers\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;--cbp-line-number-color:#000000;--cbp-line-number-width:calc(1 * 0.6 * .875rem);line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span role=\"button\" tabindex=\"0\" style=\"color:#000000;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>.glassBackgroundEffect(.automatic, displayMode: .implicit)<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki light-plus\" style=\"background-color: #FFFFFF\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #000000\">.<\/span><span style=\"color: #795E26\">glassBackgroundEffect<\/span><span style=\"color: #000000\">(.<\/span><span style=\"color: #001080\">automatic<\/span><span style=\"color: #000000\">, <\/span><span style=\"color: #795E26\">displayMode<\/span><span style=\"color: #000000\">: .<\/span><span style=\"color: #001080\">implicit<\/span><span style=\"color: #000000\">)<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p>This can cascade several levels deep. For example, we can show a glass effect on a model view when neither the parent HStack or VStack have glass.<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro cbp-has-line-numbers\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;--cbp-line-number-color:#000000;--cbp-line-number-width:calc(1 * 0.6 * .875rem);line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span role=\"button\" tabindex=\"0\" style=\"color:#000000;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>VStackLayout().depthAlignment(alignment) {\n    ...\n    HStackLayout().depthAlignment(alignment) {        \n        ModelViewSimple(name: \"Earth\", bundle: realityKitContentBundle)\n            .frame(width: 150, height: 150)\n            .padding(6)\n            .glassBackgroundEffect(.automatic, displayMode: .implicit)\n    }\n}<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki light-plus\" style=\"background-color: #FFFFFF\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #795E26\">VStackLayout<\/span><span style=\"color: #000000\">().<\/span><span style=\"color: #795E26\">depthAlignment<\/span><span style=\"color: #000000\">(alignment) {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">    ...<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">    <\/span><span style=\"color: #795E26\">HStackLayout<\/span><span style=\"color: #000000\">().<\/span><span style=\"color: #795E26\">depthAlignment<\/span><span style=\"color: #000000\">(alignment) {        <\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">        <\/span><span style=\"color: #795E26\">ModelViewSimple<\/span><span style=\"color: #000000\">(<\/span><span style=\"color: #795E26\">name<\/span><span style=\"color: #000000\">: <\/span><span style=\"color: #A31515\">&quot;Earth&quot;<\/span><span style=\"color: #000000\">, <\/span><span style=\"color: #795E26\">bundle<\/span><span style=\"color: #000000\">: realityKitContentBundle)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">            .<\/span><span style=\"color: #795E26\">frame<\/span><span style=\"color: #000000\">(<\/span><span style=\"color: #795E26\">width<\/span><span style=\"color: #000000\">: <\/span><span style=\"color: #098658\">150<\/span><span style=\"color: #000000\">, <\/span><span style=\"color: #795E26\">height<\/span><span style=\"color: #000000\">: <\/span><span style=\"color: #098658\">150<\/span><span style=\"color: #000000\">)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">            .<\/span><span style=\"color: #795E26\">padding<\/span><span style=\"color: #000000\">(<\/span><span style=\"color: #098658\">6<\/span><span style=\"color: #000000\">)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">            .<\/span><span style=\"color: #795E26\">glassBackgroundEffect<\/span><span style=\"color: #000000\">(.<\/span><span style=\"color: #001080\">automatic<\/span><span style=\"color: #000000\">, <\/span><span style=\"color: #795E26\">displayMode<\/span><span style=\"color: #000000\">: .<\/span><span style=\"color: #001080\">implicit<\/span><span style=\"color: #000000\">)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">    }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p>The most common effect we use is <code>.plate<\/code>. But we can also use <code>.feathered<\/code>, which can be customized. For example, if we want featured background for a title.<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro cbp-has-line-numbers\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;--cbp-line-number-color:#000000;--cbp-line-number-width:calc(1 * 0.6 * .875rem);line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span role=\"button\" tabindex=\"0\" style=\"color:#000000;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>Text(\"Feathered Glass Background Effect\")\n  .font(.extraLargeTitle)\n  .glassBackgroundEffect(.feathered(padding: 36, softEdgeRadius: 3), displayMode: .always)<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki light-plus\" style=\"background-color: #FFFFFF\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #795E26\">Text<\/span><span style=\"color: #000000\">(<\/span><span style=\"color: #A31515\">&quot;Feathered Glass Background Effect&quot;<\/span><span style=\"color: #000000\">)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">  .<\/span><span style=\"color: #795E26\">font<\/span><span style=\"color: #000000\">(.<\/span><span style=\"color: #001080\">extraLargeTitle<\/span><span style=\"color: #000000\">)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">  .<\/span><span style=\"color: #795E26\">glassBackgroundEffect<\/span><span style=\"color: #000000\">(.<\/span><span style=\"color: #795E26\">feathered<\/span><span style=\"color: #000000\">(<\/span><span style=\"color: #795E26\">padding<\/span><span style=\"color: #000000\">: <\/span><span style=\"color: #098658\">36<\/span><span style=\"color: #000000\">, <\/span><span style=\"color: #795E26\">softEdgeRadius<\/span><span style=\"color: #000000\">: <\/span><span style=\"color: #098658\">3<\/span><span style=\"color: #000000\">), <\/span><span style=\"color: #795E26\">displayMode<\/span><span style=\"color: #000000\">: .<\/span><span style=\"color: #001080\">always<\/span><span style=\"color: #000000\">)<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"576\" data-attachment-id=\"6673\" data-permalink=\"https:\/\/stepinto.vision\/example-code\/spatial-swiftui-glassbackgroundeffect\/attachment\/step-example-103-02\/\" data-orig-file=\"https:\/\/i0.wp.com\/stepinto.vision\/wp-content\/uploads\/2025\/09\/step-example-103-02.jpeg?fit=3840%2C2160&amp;ssl=1\" data-orig-size=\"3840,2160\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"step-example-103-02\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/i0.wp.com\/stepinto.vision\/wp-content\/uploads\/2025\/09\/step-example-103-02.jpeg?fit=1024%2C576&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/stepinto.vision\/wp-content\/uploads\/2025\/09\/step-example-103-02.jpeg?resize=1024%2C576&#038;ssl=1\" alt=\"\" class=\"wp-image-6673\" srcset=\"https:\/\/i0.wp.com\/stepinto.vision\/wp-content\/uploads\/2025\/09\/step-example-103-02.jpeg?resize=1024%2C576&amp;ssl=1 1024w, https:\/\/i0.wp.com\/stepinto.vision\/wp-content\/uploads\/2025\/09\/step-example-103-02.jpeg?resize=300%2C169&amp;ssl=1 300w, https:\/\/i0.wp.com\/stepinto.vision\/wp-content\/uploads\/2025\/09\/step-example-103-02.jpeg?resize=768%2C432&amp;ssl=1 768w, https:\/\/i0.wp.com\/stepinto.vision\/wp-content\/uploads\/2025\/09\/step-example-103-02.jpeg?resize=1536%2C864&amp;ssl=1 1536w, https:\/\/i0.wp.com\/stepinto.vision\/wp-content\/uploads\/2025\/09\/step-example-103-02.jpeg?resize=2048%2C1152&amp;ssl=1 2048w, https:\/\/i0.wp.com\/stepinto.vision\/wp-content\/uploads\/2025\/09\/step-example-103-02.jpeg?resize=1200%2C675&amp;ssl=1 1200w, https:\/\/i0.wp.com\/stepinto.vision\/wp-content\/uploads\/2025\/09\/step-example-103-02.jpeg?w=2580&amp;ssl=1 2580w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Feathered title<\/figcaption><\/figure>\n\n\n\n<p>We can also shape the effect using an <code>InsettableShape<\/code>. Here we have a plate effect with a circle shape.<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro cbp-has-line-numbers\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;--cbp-line-number-color:#000000;--cbp-line-number-width:calc(1 * 0.6 * .875rem);line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span role=\"button\" tabindex=\"0\" style=\"color:#000000;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>Text(\"Moon\")\n  .font(.extraLargeTitle)\n  .padding(48)\n  .glassBackgroundEffect(.plate, in: .circle, displayMode: .always)<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki light-plus\" style=\"background-color: #FFFFFF\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #795E26\">Text<\/span><span style=\"color: #000000\">(<\/span><span style=\"color: #A31515\">&quot;Moon&quot;<\/span><span style=\"color: #000000\">)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">  .<\/span><span style=\"color: #795E26\">font<\/span><span style=\"color: #000000\">(.<\/span><span style=\"color: #001080\">extraLargeTitle<\/span><span style=\"color: #000000\">)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">  .<\/span><span style=\"color: #795E26\">padding<\/span><span style=\"color: #000000\">(<\/span><span style=\"color: #098658\">48<\/span><span style=\"color: #000000\">)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">  .<\/span><span style=\"color: #795E26\">glassBackgroundEffect<\/span><span style=\"color: #000000\">(.<\/span><span style=\"color: #001080\">plate<\/span><span style=\"color: #000000\">, <\/span><span style=\"color: #795E26\">in<\/span><span style=\"color: #000000\">: .<\/span><span style=\"color: #001080\">circle<\/span><span style=\"color: #000000\">, <\/span><span style=\"color: #795E26\">displayMode<\/span><span style=\"color: #000000\">: .<\/span><span style=\"color: #001080\">always<\/span><span style=\"color: #000000\">)<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"576\" data-attachment-id=\"6675\" data-permalink=\"https:\/\/stepinto.vision\/example-code\/spatial-swiftui-glassbackgroundeffect\/attachment\/step-example-103-03\/\" data-orig-file=\"https:\/\/i0.wp.com\/stepinto.vision\/wp-content\/uploads\/2025\/09\/step-example-103-03.jpeg?fit=3840%2C2160&amp;ssl=1\" data-orig-size=\"3840,2160\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"step-example-103-03\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/i0.wp.com\/stepinto.vision\/wp-content\/uploads\/2025\/09\/step-example-103-03.jpeg?fit=1024%2C576&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/stepinto.vision\/wp-content\/uploads\/2025\/09\/step-example-103-03.jpeg?resize=1024%2C576&#038;ssl=1\" alt=\"\" class=\"wp-image-6675\" srcset=\"https:\/\/i0.wp.com\/stepinto.vision\/wp-content\/uploads\/2025\/09\/step-example-103-03.jpeg?resize=1024%2C576&amp;ssl=1 1024w, https:\/\/i0.wp.com\/stepinto.vision\/wp-content\/uploads\/2025\/09\/step-example-103-03.jpeg?resize=300%2C169&amp;ssl=1 300w, https:\/\/i0.wp.com\/stepinto.vision\/wp-content\/uploads\/2025\/09\/step-example-103-03.jpeg?resize=768%2C432&amp;ssl=1 768w, https:\/\/i0.wp.com\/stepinto.vision\/wp-content\/uploads\/2025\/09\/step-example-103-03.jpeg?resize=1536%2C864&amp;ssl=1 1536w, https:\/\/i0.wp.com\/stepinto.vision\/wp-content\/uploads\/2025\/09\/step-example-103-03.jpeg?resize=2048%2C1152&amp;ssl=1 2048w, https:\/\/i0.wp.com\/stepinto.vision\/wp-content\/uploads\/2025\/09\/step-example-103-03.jpeg?resize=1200%2C675&amp;ssl=1 1200w, https:\/\/i0.wp.com\/stepinto.vision\/wp-content\/uploads\/2025\/09\/step-example-103-03.jpeg?w=2580&amp;ssl=1 2580w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Circle shaped plate<\/figcaption><\/figure>\n\n\n\n<p>Let&#8217;s see this all in action.<\/p>\n\n\n\n\t\t<figure class=\"wp-block-jetpack-videopress jetpack-videopress-player\" style=\"\" >\n\t\t\t<div class=\"jetpack-videopress-player__wrapper\"> <div class=\"jetpack-video-wrapper\"><iframe title=\"VideoPress Video Player\" aria-label='VideoPress Video Player' width='720' height='405' src='https:\/\/videopress.com\/embed\/3TScmIss?cover=1&amp;autoPlay=0&amp;controls=1&amp;loop=0&amp;muted=0&amp;persistVolume=1&amp;playsinline=0&amp;preloadContent=metadata&amp;useAverageColor=1&amp;hd=0' frameborder='0' allowfullscreen data-resize-to-parent=\"true\" allow='clipboard-write'><\/iframe><script src='https:\/\/v0.wordpress.com\/js\/next\/videopress-iframe.js?m=1739540970'><\/script><\/div><\/div>\n\t\t\t<figcaption>Glass background demo video<\/figcaption>\n\t\t\t\n\t\t<\/figure>\n\t\t\n\n\n<h2 class=\"wp-block-heading\">Example Code<\/h2>\n\n\n\n<!--more-->\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro cbp-has-line-numbers\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;--cbp-line-number-color:#000000;--cbp-line-number-width:calc(3 * 0.6 * .875rem);line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span role=\"button\" tabindex=\"0\" style=\"color:#000000;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>struct Example103: View {\n\n    @State private var parentBackgroundFeathered: Bool = false\n    @State private var parentBackgroundMode: GlassBackgroundDisplayMode = .always\n    @State private var childrenBackgroundMode: GlassBackgroundDisplayMode = .implicit\n\n    var alignment: DepthAlignment = .back\n\n    var body: some View {\n\n        \/\/\/ Feathered Example\n\/\/        Text(\"Feathered Glass Background Effect\")\n\/\/            .font(.extraLargeTitle)\n\/\/            .glassBackgroundEffect(.feathered(padding: 36, softEdgeRadius: 3), displayMode: .always)\n\n        \/\/\/ Clip Shape Example\n\/\/        Text(\"Moon\")\n\/\/            .font(.extraLargeTitle)\n\/\/            .padding(48)\n\/\/            .glassBackgroundEffect(.plate, in: .circle, displayMode: .always)\n\n        \/\/\/ Layout Example\n        VStackLayout().depthAlignment(alignment) {\n\n            HStackLayout().depthAlignment(alignment) {\n\n                earthCard\n\n                ModelViewSimple(name: \"Earth\", bundle: realityKitContentBundle)\n                    .frame(width: 150, height: 150)\n                    .padding(6)\n                    .glassBackgroundEffect(.automatic, displayMode: .implicit)\n\n            }\n            .padding()\n            .glassBackgroundEffect(.automatic, displayMode: childrenBackgroundMode)\n\n            HStackLayout().depthAlignment(alignment) {\n\n                ModelViewSimple(name: \"Moon\", bundle: realityKitContentBundle)\n                    .frame(width: 60, height: 60)\n                    .padding(6)\n                    .glassBackgroundEffect(.automatic, displayMode: .implicit)\n\n                moonCard\n            }\n            .padding()\n            .glassBackgroundEffect(.automatic, displayMode: childrenBackgroundMode)\n\n        }\n        .glassBackgroundEffect(.automatic, displayMode: parentBackgroundMode)\n\n        \/\/ Controls to modify the example\n        .ornament(attachmentAnchor: .scene(.trailing), contentAlignment: .trailing, ornament: {\n            VStack(alignment: .center, spacing: 8) {\n                Text(\"VStack\")\n                Button(action: {\n                    parentBackgroundMode = .always\n                }, label: {\n                    Text(\"Always\")\n                })\n                Button(action: {\n                    parentBackgroundMode = .never\n                }, label: {\n                    Text(\"Never\")\n                })\n                Text(\"HStacks\")\n                Button(action: {\n                    childrenBackgroundMode = .implicit\n                }, label: {\n                    Text(\"Implicit\")\n                })\n\n                Button(action: {\n                    childrenBackgroundMode = .never\n                }, label: {\n                    Text(\"Never\")\n                })\n            }\n            .padding()\n            .controlSize(.small)\n            .glassBackgroundEffect()\n\n        })\n\n    }\n\n    var earthCard: some View {\n        VStack {\n            Text(\"Earth\")\n                .font(.title)\n            Text(\"The only known planet known to serve ice cream.\")\n                .font(.caption)\n        }\n        .padding()\n        .background(.black)\n        .cornerRadius(24)\n        .shadow(radius: 20)\n        .frame(width: 220, height: 160)\n    }\n\n    var moonCard: some View {\n        VStack {\n            Text(\"Luna\")\n                .font(.title)\n            Text(\"Made amost entirely of cheese.\")\n                .font(.caption)\n        }\n        .padding()\n        .background(.black)\n        .cornerRadius(24)\n        .shadow(radius: 20)\n        .frame(width: 180, height: 140)\n    }\n}<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki light-plus\" style=\"background-color: #FFFFFF\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #0000FF\">struct<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #267F99\">Example103<\/span><span style=\"color: #000000\">: View {<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #000000\">    <\/span><span style=\"color: #0000FF\">@State<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #0000FF\">private<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #0000FF\">var<\/span><span style=\"color: #000000\"> parentBackgroundFeathered: <\/span><span style=\"color: #267F99\">Bool<\/span><span style=\"color: #000000\"> = <\/span><span style=\"color: #0000FF\">false<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">    <\/span><span style=\"color: #0000FF\">@State<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #0000FF\">private<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #0000FF\">var<\/span><span style=\"color: #000000\"> parentBackgroundMode: GlassBackgroundDisplayMode = .<\/span><span style=\"color: #001080\">always<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">    <\/span><span style=\"color: #0000FF\">@State<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #0000FF\">private<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #0000FF\">var<\/span><span style=\"color: #000000\"> childrenBackgroundMode: GlassBackgroundDisplayMode = .<\/span><span style=\"color: #001080\">implicit<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #000000\">    <\/span><span style=\"color: #0000FF\">var<\/span><span style=\"color: #000000\"> alignment: DepthAlignment = .<\/span><span style=\"color: #001080\">back<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #000000\">    <\/span><span style=\"color: #0000FF\">var<\/span><span style=\"color: #000000\"> body: some View {<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #000000\">        <\/span><span style=\"color: #008000\">\/\/\/ Feathered Example<\/span><\/span>\n<span class=\"line\"><span style=\"color: #008000\">\/\/        Text(&quot;Feathered Glass Background Effect&quot;)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #008000\">\/\/            .font(.extraLargeTitle)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #008000\">\/\/            .glassBackgroundEffect(.feathered(padding: 36, softEdgeRadius: 3), displayMode: .always)<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #000000\">        <\/span><span style=\"color: #008000\">\/\/\/ Clip Shape Example<\/span><\/span>\n<span class=\"line\"><span style=\"color: #008000\">\/\/        Text(&quot;Moon&quot;)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #008000\">\/\/            .font(.extraLargeTitle)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #008000\">\/\/            .padding(48)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #008000\">\/\/            .glassBackgroundEffect(.plate, in: .circle, displayMode: .always)<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #000000\">        <\/span><span style=\"color: #008000\">\/\/\/ Layout Example<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">        <\/span><span style=\"color: #795E26\">VStackLayout<\/span><span style=\"color: #000000\">().<\/span><span style=\"color: #795E26\">depthAlignment<\/span><span style=\"color: #000000\">(alignment) {<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #000000\">            <\/span><span style=\"color: #795E26\">HStackLayout<\/span><span style=\"color: #000000\">().<\/span><span style=\"color: #795E26\">depthAlignment<\/span><span style=\"color: #000000\">(alignment) {<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                earthCard<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                <\/span><span style=\"color: #795E26\">ModelViewSimple<\/span><span style=\"color: #000000\">(<\/span><span style=\"color: #795E26\">name<\/span><span style=\"color: #000000\">: <\/span><span style=\"color: #A31515\">&quot;Earth&quot;<\/span><span style=\"color: #000000\">, <\/span><span style=\"color: #795E26\">bundle<\/span><span style=\"color: #000000\">: realityKitContentBundle)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                    .<\/span><span style=\"color: #795E26\">frame<\/span><span style=\"color: #000000\">(<\/span><span style=\"color: #795E26\">width<\/span><span style=\"color: #000000\">: <\/span><span style=\"color: #098658\">150<\/span><span style=\"color: #000000\">, <\/span><span style=\"color: #795E26\">height<\/span><span style=\"color: #000000\">: <\/span><span style=\"color: #098658\">150<\/span><span style=\"color: #000000\">)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                    .<\/span><span style=\"color: #795E26\">padding<\/span><span style=\"color: #000000\">(<\/span><span style=\"color: #098658\">6<\/span><span style=\"color: #000000\">)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                    .<\/span><span style=\"color: #795E26\">glassBackgroundEffect<\/span><span style=\"color: #000000\">(.<\/span><span style=\"color: #001080\">automatic<\/span><span style=\"color: #000000\">, <\/span><span style=\"color: #795E26\">displayMode<\/span><span style=\"color: #000000\">: .<\/span><span style=\"color: #001080\">implicit<\/span><span style=\"color: #000000\">)<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #000000\">            }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">            .<\/span><span style=\"color: #795E26\">padding<\/span><span style=\"color: #000000\">()<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">            .<\/span><span style=\"color: #795E26\">glassBackgroundEffect<\/span><span style=\"color: #000000\">(.<\/span><span style=\"color: #001080\">automatic<\/span><span style=\"color: #000000\">, <\/span><span style=\"color: #795E26\">displayMode<\/span><span style=\"color: #000000\">: childrenBackgroundMode)<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #000000\">            <\/span><span style=\"color: #795E26\">HStackLayout<\/span><span style=\"color: #000000\">().<\/span><span style=\"color: #795E26\">depthAlignment<\/span><span style=\"color: #000000\">(alignment) {<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                <\/span><span style=\"color: #795E26\">ModelViewSimple<\/span><span style=\"color: #000000\">(<\/span><span style=\"color: #795E26\">name<\/span><span style=\"color: #000000\">: <\/span><span style=\"color: #A31515\">&quot;Moon&quot;<\/span><span style=\"color: #000000\">, <\/span><span style=\"color: #795E26\">bundle<\/span><span style=\"color: #000000\">: realityKitContentBundle)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                    .<\/span><span style=\"color: #795E26\">frame<\/span><span style=\"color: #000000\">(<\/span><span style=\"color: #795E26\">width<\/span><span style=\"color: #000000\">: <\/span><span style=\"color: #098658\">60<\/span><span style=\"color: #000000\">, <\/span><span style=\"color: #795E26\">height<\/span><span style=\"color: #000000\">: <\/span><span style=\"color: #098658\">60<\/span><span style=\"color: #000000\">)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                    .<\/span><span style=\"color: #795E26\">padding<\/span><span style=\"color: #000000\">(<\/span><span style=\"color: #098658\">6<\/span><span style=\"color: #000000\">)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                    .<\/span><span style=\"color: #795E26\">glassBackgroundEffect<\/span><span style=\"color: #000000\">(.<\/span><span style=\"color: #001080\">automatic<\/span><span style=\"color: #000000\">, <\/span><span style=\"color: #795E26\">displayMode<\/span><span style=\"color: #000000\">: .<\/span><span style=\"color: #001080\">implicit<\/span><span style=\"color: #000000\">)<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                moonCard<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">            }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">            .<\/span><span style=\"color: #795E26\">padding<\/span><span style=\"color: #000000\">()<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">            .<\/span><span style=\"color: #795E26\">glassBackgroundEffect<\/span><span style=\"color: #000000\">(.<\/span><span style=\"color: #001080\">automatic<\/span><span style=\"color: #000000\">, <\/span><span style=\"color: #795E26\">displayMode<\/span><span style=\"color: #000000\">: childrenBackgroundMode)<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #000000\">        }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">        .<\/span><span style=\"color: #795E26\">glassBackgroundEffect<\/span><span style=\"color: #000000\">(.<\/span><span style=\"color: #001080\">automatic<\/span><span style=\"color: #000000\">, <\/span><span style=\"color: #795E26\">displayMode<\/span><span style=\"color: #000000\">: parentBackgroundMode)<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #000000\">        <\/span><span style=\"color: #008000\">\/\/ Controls to modify the example<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">        .<\/span><span style=\"color: #795E26\">ornament<\/span><span style=\"color: #000000\">(<\/span><span style=\"color: #795E26\">attachmentAnchor<\/span><span style=\"color: #000000\">: .<\/span><span style=\"color: #795E26\">scene<\/span><span style=\"color: #000000\">(.<\/span><span style=\"color: #001080\">trailing<\/span><span style=\"color: #000000\">), <\/span><span style=\"color: #795E26\">contentAlignment<\/span><span style=\"color: #000000\">: .<\/span><span style=\"color: #001080\">trailing<\/span><span style=\"color: #000000\">, <\/span><span style=\"color: #795E26\">ornament<\/span><span style=\"color: #000000\">: {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">            <\/span><span style=\"color: #795E26\">VStack<\/span><span style=\"color: #000000\">(<\/span><span style=\"color: #795E26\">alignment<\/span><span style=\"color: #000000\">: .<\/span><span style=\"color: #001080\">center<\/span><span style=\"color: #000000\">, <\/span><span style=\"color: #795E26\">spacing<\/span><span style=\"color: #000000\">: <\/span><span style=\"color: #098658\">8<\/span><span style=\"color: #000000\">) {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                <\/span><span style=\"color: #795E26\">Text<\/span><span style=\"color: #000000\">(<\/span><span style=\"color: #A31515\">&quot;VStack&quot;<\/span><span style=\"color: #000000\">)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                <\/span><span style=\"color: #795E26\">Button<\/span><span style=\"color: #000000\">(<\/span><span style=\"color: #795E26\">action<\/span><span style=\"color: #000000\">: {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                    parentBackgroundMode = .<\/span><span style=\"color: #001080\">always<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                }, <\/span><span style=\"color: #795E26\">label<\/span><span style=\"color: #000000\">: {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                    <\/span><span style=\"color: #795E26\">Text<\/span><span style=\"color: #000000\">(<\/span><span style=\"color: #A31515\">&quot;Always&quot;<\/span><span style=\"color: #000000\">)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                })<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                <\/span><span style=\"color: #795E26\">Button<\/span><span style=\"color: #000000\">(<\/span><span style=\"color: #795E26\">action<\/span><span style=\"color: #000000\">: {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                    parentBackgroundMode = .<\/span><span style=\"color: #001080\">never<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                }, <\/span><span style=\"color: #795E26\">label<\/span><span style=\"color: #000000\">: {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                    <\/span><span style=\"color: #795E26\">Text<\/span><span style=\"color: #000000\">(<\/span><span style=\"color: #A31515\">&quot;Never&quot;<\/span><span style=\"color: #000000\">)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                })<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                <\/span><span style=\"color: #795E26\">Text<\/span><span style=\"color: #000000\">(<\/span><span style=\"color: #A31515\">&quot;HStacks&quot;<\/span><span style=\"color: #000000\">)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                <\/span><span style=\"color: #795E26\">Button<\/span><span style=\"color: #000000\">(<\/span><span style=\"color: #795E26\">action<\/span><span style=\"color: #000000\">: {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                    childrenBackgroundMode = .<\/span><span style=\"color: #001080\">implicit<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                }, <\/span><span style=\"color: #795E26\">label<\/span><span style=\"color: #000000\">: {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                    <\/span><span style=\"color: #795E26\">Text<\/span><span style=\"color: #000000\">(<\/span><span style=\"color: #A31515\">&quot;Implicit&quot;<\/span><span style=\"color: #000000\">)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                })<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                <\/span><span style=\"color: #795E26\">Button<\/span><span style=\"color: #000000\">(<\/span><span style=\"color: #795E26\">action<\/span><span style=\"color: #000000\">: {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                    childrenBackgroundMode = .<\/span><span style=\"color: #001080\">never<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                }, <\/span><span style=\"color: #795E26\">label<\/span><span style=\"color: #000000\">: {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                    <\/span><span style=\"color: #795E26\">Text<\/span><span style=\"color: #000000\">(<\/span><span style=\"color: #A31515\">&quot;Never&quot;<\/span><span style=\"color: #000000\">)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                })<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">            }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">            .<\/span><span style=\"color: #795E26\">padding<\/span><span style=\"color: #000000\">()<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">            .<\/span><span style=\"color: #795E26\">controlSize<\/span><span style=\"color: #000000\">(.<\/span><span style=\"color: #001080\">small<\/span><span style=\"color: #000000\">)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">            .<\/span><span style=\"color: #795E26\">glassBackgroundEffect<\/span><span style=\"color: #000000\">()<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #000000\">        })<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #000000\">    }<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #000000\">    <\/span><span style=\"color: #0000FF\">var<\/span><span style=\"color: #000000\"> earthCard: some View {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">        VStack {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">            <\/span><span style=\"color: #795E26\">Text<\/span><span style=\"color: #000000\">(<\/span><span style=\"color: #A31515\">&quot;Earth&quot;<\/span><span style=\"color: #000000\">)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                .<\/span><span style=\"color: #795E26\">font<\/span><span style=\"color: #000000\">(.<\/span><span style=\"color: #001080\">title<\/span><span style=\"color: #000000\">)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">            <\/span><span style=\"color: #795E26\">Text<\/span><span style=\"color: #000000\">(<\/span><span style=\"color: #A31515\">&quot;The only known planet known to serve ice cream.&quot;<\/span><span style=\"color: #000000\">)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                .<\/span><span style=\"color: #795E26\">font<\/span><span style=\"color: #000000\">(.<\/span><span style=\"color: #001080\">caption<\/span><span style=\"color: #000000\">)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">        }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">        .<\/span><span style=\"color: #795E26\">padding<\/span><span style=\"color: #000000\">()<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">        .<\/span><span style=\"color: #795E26\">background<\/span><span style=\"color: #000000\">(.<\/span><span style=\"color: #001080\">black<\/span><span style=\"color: #000000\">)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">        .<\/span><span style=\"color: #795E26\">cornerRadius<\/span><span style=\"color: #000000\">(<\/span><span style=\"color: #098658\">24<\/span><span style=\"color: #000000\">)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">        .<\/span><span style=\"color: #795E26\">shadow<\/span><span style=\"color: #000000\">(<\/span><span style=\"color: #795E26\">radius<\/span><span style=\"color: #000000\">: <\/span><span style=\"color: #098658\">20<\/span><span style=\"color: #000000\">)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">        .<\/span><span style=\"color: #795E26\">frame<\/span><span style=\"color: #000000\">(<\/span><span style=\"color: #795E26\">width<\/span><span style=\"color: #000000\">: <\/span><span style=\"color: #098658\">220<\/span><span style=\"color: #000000\">, <\/span><span style=\"color: #795E26\">height<\/span><span style=\"color: #000000\">: <\/span><span style=\"color: #098658\">160<\/span><span style=\"color: #000000\">)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">    }<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #000000\">    <\/span><span style=\"color: #0000FF\">var<\/span><span style=\"color: #000000\"> moonCard: some View {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">        VStack {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">            <\/span><span style=\"color: #795E26\">Text<\/span><span style=\"color: #000000\">(<\/span><span style=\"color: #A31515\">&quot;Luna&quot;<\/span><span style=\"color: #000000\">)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                .<\/span><span style=\"color: #795E26\">font<\/span><span style=\"color: #000000\">(.<\/span><span style=\"color: #001080\">title<\/span><span style=\"color: #000000\">)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">            <\/span><span style=\"color: #795E26\">Text<\/span><span style=\"color: #000000\">(<\/span><span style=\"color: #A31515\">&quot;Made amost entirely of cheese.&quot;<\/span><span style=\"color: #000000\">)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                .<\/span><span style=\"color: #795E26\">font<\/span><span style=\"color: #000000\">(.<\/span><span style=\"color: #001080\">caption<\/span><span style=\"color: #000000\">)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">        }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">        .<\/span><span style=\"color: #795E26\">padding<\/span><span style=\"color: #000000\">()<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">        .<\/span><span style=\"color: #795E26\">background<\/span><span style=\"color: #000000\">(.<\/span><span style=\"color: #001080\">black<\/span><span style=\"color: #000000\">)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">        .<\/span><span style=\"color: #795E26\">cornerRadius<\/span><span style=\"color: #000000\">(<\/span><span style=\"color: #098658\">24<\/span><span style=\"color: #000000\">)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">        .<\/span><span style=\"color: #795E26\">shadow<\/span><span style=\"color: #000000\">(<\/span><span style=\"color: #795E26\">radius<\/span><span style=\"color: #000000\">: <\/span><span style=\"color: #098658\">20<\/span><span style=\"color: #000000\">)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">        .<\/span><span style=\"color: #795E26\">frame<\/span><span style=\"color: #000000\">(<\/span><span style=\"color: #795E26\">width<\/span><span style=\"color: #000000\">: <\/span><span style=\"color: #098658\">180<\/span><span style=\"color: #000000\">, <\/span><span style=\"color: #795E26\">height<\/span><span style=\"color: #000000\">: <\/span><span style=\"color: #098658\">140<\/span><span style=\"color: #000000\">)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">    }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">}<\/span><\/span><\/code><\/pre><\/div>\n","protected":false},"excerpt":{"rendered":"<p>We can use this to add a glass background to any view.<\/p>\n","protected":false},"author":93705089,"featured_media":6666,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kad_blocks_custom_css":"","_kad_blocks_head_custom_js":"","_kad_blocks_body_custom_js":"","_kad_blocks_footer_custom_js":"","advanced_seo_description":"","jetpack_seo_html_title":"","jetpack_seo_noindex":false,"_EventAllDay":false,"_EventTimezone":"","_EventStartDate":"","_EventEndDate":"","_EventStartDateUTC":"","_EventEndDateUTC":"","_EventShowMap":false,"_EventShowMapLink":false,"_EventURL":"","_EventCost":"","_EventCostDescription":"","_EventCurrencySymbol":"","_EventCurrencyCode":"","_EventCurrencyPosition":"","_EventDateTimeSeparator":"","_EventTimeRangeSeparator":"","_EventOrganizerID":[],"_EventVenueID":[],"_OrganizerEmail":"","_OrganizerPhone":"","_OrganizerWebsite":"","_VenueAddress":"","_VenueCity":"","_VenueCountry":"","_VenueProvince":"","_VenueState":"","_VenueZip":"","_VenuePhone":"","_VenueURL":"","_VenueStateProvince":"","_VenueLat":"","_VenueLng":"","_VenueShowMap":false,"_VenueShowMapLink":false,"_kadence_starter_templates_imported_post":false,"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"_wpas_customize_per_network":false,"jetpack_post_was_ever_published":false},"categories":[1365],"tags":[],"class_list":["post-6664","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-example-code"],"jetpack_publicize_connections":[],"taxonomy_info":{"category":[{"value":1365,"label":"Example Code"}]},"featured_image_src_large":["https:\/\/i0.wp.com\/stepinto.vision\/wp-content\/uploads\/2025\/09\/step-example-103-01.jpeg?fit=1024%2C576&ssl=1",1024,576,true],"author_info":{"display_name":"Joseph Simpson","author_link":"https:\/\/stepinto.vision\/author\/vrhermit\/"},"comment_info":0,"category_info":[{"term_id":1365,"name":"Example Code","slug":"example-code","term_group":0,"term_taxonomy_id":11,"taxonomy":"category","description":"Code snippets and examples of using common APIs throughout visionOS development","parent":0,"count":187,"filter":"raw","cat_ID":1365,"category_count":187,"category_description":"Code snippets and examples of using common APIs throughout visionOS development","cat_name":"Example Code","category_nicename":"example-code","category_parent":0}],"tag_info":false,"jetpack_featured_media_url":"https:\/\/i0.wp.com\/stepinto.vision\/wp-content\/uploads\/2025\/09\/step-example-103-01.jpeg?fit=3840%2C2160&ssl=1","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/stepinto.vision\/wp-json\/wp\/v2\/posts\/6664","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/stepinto.vision\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/stepinto.vision\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/stepinto.vision\/wp-json\/wp\/v2\/users\/93705089"}],"replies":[{"embeddable":true,"href":"https:\/\/stepinto.vision\/wp-json\/wp\/v2\/comments?post=6664"}],"version-history":[{"count":11,"href":"https:\/\/stepinto.vision\/wp-json\/wp\/v2\/posts\/6664\/revisions"}],"predecessor-version":[{"id":6680,"href":"https:\/\/stepinto.vision\/wp-json\/wp\/v2\/posts\/6664\/revisions\/6680"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/stepinto.vision\/wp-json\/wp\/v2\/media\/6666"}],"wp:attachment":[{"href":"https:\/\/stepinto.vision\/wp-json\/wp\/v2\/media?parent=6664"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/stepinto.vision\/wp-json\/wp\/v2\/categories?post=6664"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/stepinto.vision\/wp-json\/wp\/v2\/tags?post=6664"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}