SwiftUI Card with glowing edges inside app with subtle blur background

Content.view

//
//  ContentView.swift
//  GradientCard
//
//  Created by Denise Nepraunig on 26.11.23.
//

import SwiftUI

struct GradientLine: View {
    var body: some View {
        RoundedRectangle(cornerRadius: 0, style: .continuous)
            .fill(
                LinearGradient(
                    gradient: Gradient(stops: [
                        .init(color: .clear, location: 0.0),
                        .init(color: .clear, location: 0.25),
                        .init(color: .blue, location: 0.5),
                        .init(color: .clear, location: 0.75),
                    ]),
                    startPoint: .leading,
                    endPoint: .trailing
                )
            )
            .blur(radius: 0.5)
            .frame(height: 1)
    }
}

struct GradientShape: View {
    var body: some View {
        VStack {
            GradientLine()
            Spacer()
            GradientLine()
        }
    }
}

let text = """
Hello World!

I tried to create a gradient UI
with some fancy glowing edges.
"""

struct ContentView: View {
    var body: some View {
        ZStack {
            Color.black.opacity(0.7).ignoresSafeArea(edges: .all)
            
            // background rectangle with sligth blur
            Rectangle()
                .fill(Color.blue.opacity(0.15))
                .frame(maxWidth: .infinity, maxHeight: .infinity)
                .edgesIgnoringSafeArea(.all)
                .blur(radius: 200) // Increase or decrease radius for desired blur effect
            
            Text(text)
                .font(.title)
                .padding(36)
                .overlay(content: {
                    ZStack {
                        GradientShape()
                        RoundedRectangle(cornerRadius: 10)
                            .stroke(.quaternary, lineWidth: 1)
                    }
                })
                .background {
                    Color.black.opacity(0.3)
                }
                .clipShape(RoundedRectangle(cornerRadius: 10.0))
        }
    }
}

#Preview {
    ContentView()
}

Screenshot:

Inspiration:

https://sigmahq.io