How to Build Apple Watch Style Activity Rings in SwiftUI

What You Will Build

A collection of neon-glowing UI elements on a black background: glowing text, a pulsing neon circle, a bordered rectangle with inner text glow, and a glowing line. All elements pulse between bright and dim states with a continuous animation. This effect is used in retro-themed apps, music players, gaming UIs, and dark-mode feature highlights.

Why This Pattern Matters

Neon glow effects are built entirely with stacked .shadow modifiers. No custom shaders or images needed. This teaches you how multiple shadows create depth and how animating shadow radius creates a pulsing glow.

Key SwiftUI Concepts

• Stacked shadows at increasing radii to simulate light bleed.
• Boolean toggle with repeatForever to animate between two glow intensities.
• Color-matched shadows where the shadow color matches the element color for a realistic neon tube look.

The Complete Neon Glow View

struct NeonGlowDemo: View {
    @State private var glow = false

    var body: some View {
        ZStack {
            Color.black.ignoresSafeArea()

            VStack(spacing: 40) {
                // Neon text with triple shadow
                Text("NEON")
                    .font(.system(size: 60, weight: .black))
                    .foregroundStyle(.cyan)
                    .shadow(color: .cyan, radius: glow ? 20 : 5)
                    .shadow(color: .cyan, radius: glow ? 40 : 10)
                    .shadow(color: .cyan.opacity(0.5),
                            radius: glow ? 60 : 15)

                // Neon circle
                Circle()
                    .stroke(.pink, lineWidth: 3)
                    .frame(width: 100, height: 100)
                    .shadow(color: .pink, radius: glow ? 20 : 5)
                    .shadow(color: .pink, radius: glow ? 40 : 10)

                // Neon rectangle with inner text
                RoundedRectangle(cornerRadius: 15)
                    .stroke(.green, lineWidth: 3)
                    .frame(width: 200, height: 80)
                    .overlay {
                        Text("GLOW")
                            .font(.title.bold())
                            .foregroundStyle(.green)
                            .shadow(color: .green,
                                    radius: glow ? 15 : 5)
                    }
                    .shadow(color: .green, radius: glow ? 20 : 5)
                    .shadow(color: .green, radius: glow ? 40 : 10)

                // Neon line
                Rectangle()
                    .fill(.purple)
                    .frame(width: 200, height: 3)
                    .shadow(color: .purple, radius: glow ? 20 : 5)
                    .shadow(color: .purple, radius: glow ? 40 : 10)
            }
        }
        .onAppear {
            withAnimation(.easeInOut(duration: 1.5)
                .repeatForever(autoreverses: true)) {
                glow.toggle()
            }
        }
    }
}

How Stacked Shadows Create Neon

A single shadow creates a simple blur glow. Stacking two or three shadows at increasing radii simulates how real neon light bleeds: a tight bright core, a medium glow, and a wide diffuse halo. Using .opacity(0.5) on the outermost shadow prevents it from being too intense.

Tips and Pitfalls

• Black background is required: Neon glow is invisible on white or light backgrounds because shadows blend into the background color.
• Match shadow color to element color: A cyan element with a cyan shadow looks like a neon tube. Mismatched colors look like colored drop shadows.
• Performance with many shadows: Each .shadow is a separate render pass. Limit to 2-3 shadows per element and avoid applying neon to large lists.
• easeInOut with autoreverses: true creates the smooth pulsing. Using .linear would look mechanical.

iOS Version: iOS 15+