Apple Intelligence Glow Border Effect Code for iOS

The Apple Intelligence glow border is the soft, animated band of color that sweeps around the screen edge while Siri or a generative feature is thinking. In SwiftUI the pragmatic build is an inset rounded rectangle stroked with an AngularGradient that you rotate on a repeating animation, then blur and layer for the bloom. Reach for a Metal shader through the Shader and colorEffect API only when you want flowing, non-uniform color that a rotating gradient cannot fake. Tie it to a real processing state so it reads as activity rather than decoration, respect Reduce Motion, and the effect lands in well under a hundred lines. The screen it wraps is fastest to start from a free VP0 design with Claude Code or Cursor.

What the Apple Intelligence glow actually is

It is a state indicator, not a frame. Apple uses the edge glow to say the system is working on something: the colors drift, bloom past the bezel, then fade when the result arrives. Two visual properties carry the effect, a multicolor gradient that moves around the perimeter, and a soft bloom where the light appears to spill outward. Apple’s Human Interface Guidelines frame motion like this as feedback, so the glow should appear with a thinking state and leave with the answer.

Get those two properties right and the rest is detail. The gradient sells the intelligence feel through color movement; the bloom keeps it from looking like a hard outline. Skip either and it reads as a cheap border.

The fastest version: an animated gradient stroke

For most apps an animated AngularGradient stroke is the whole effect. You inset a RoundedRectangle so the stroke hugs the screen corners, fill the stroke with an angular gradient whose colors loop back to the start, rotate it forever, and blur the layer for bloom. SwiftUI’s AngularGradient and a single repeatForever animation do the work.

struct AIGlowBorder: View {
    @State private var angle = 0.0
    var body: some View {
        RoundedRectangle(cornerRadius: 52, style: .continuous)
            .inset(by: 2)
            .stroke(
                AngularGradient(
                    colors: [.purple, .blue, .cyan, .pink, .purple],
                    center: .center,
                    angle: .degrees(angle)
                ),
                lineWidth: 6
            )
            .blur(radius: 9)
            .ignoresSafeArea()
            .onAppear {
                withAnimation(.linear(duration: 4).repeatForever(autoreverses: false)) {
                    angle = 360
                }
            }
    }
}

Two details make it look right. Repeat the first color at the end of the array so the gradient has no visible seam where it wraps, and layer a second, wider, more transparent copy behind the sharp one to deepen the bloom. Put the view in a ZStack above your content with allowsHitTesting(false) so it never blocks taps.

Three ways to draw the glow

Approach	Best for	Fidelity	Effort
Animated AngularGradient stroke	Most apps, a clean perimeter sweep	Good	Low
Metal shader via colorEffect	Flowing, organic, non-uniform color	High	Higher
Lottie or Rive file	A designer-authored exact look	Matches the file	Medium

The gradient stroke covers the common case with the least code. A Metal shader gives you per-pixel control for color that ripples and breathes rather than simply rotating, at the cost of writing Metal Shading Language and testing on device. A Lottie or Rive file makes sense when a designer hands you the exact animation and you would rather play it than reproduce it.

When a Metal shader is worth it

Reach for a shader when the rotating gradient starts to feel mechanical. The real Apple Intelligence glow does not just spin a fixed wheel of color; the hues swell and shift at different rates, which is hard to fake with one rotation. SwiftUI’s colorEffect and Shader types, introduced in iOS 17, let you sample screen position and time to compute color per pixel, so you can drive the perimeter brightness with layered noise. It is more work and you must verify performance on a real device, but it is the only path to the organic version.

For anything short of that, the gradient version is indistinguishable to most users and far cheaper to maintain.

Tying the glow to a real state

The glow should mean something. Drive its visibility from the same isThinking flag that gates your network call or on-device inference, fade it in when work starts and out when the result lands, and never leave it running as ambient decoration. A glow that is always on stops signaling anything.

Accessibility is part of getting this right. Read the Reduce Motion setting and swap the rotation for a gentle opacity pulse, or a static gradient, when it is enabled. Users who opt out of motion still get a clear working cue without the spin. The AI agent thinking animation pattern shows the same state-driven approach for an inline indicator.

Common mistakes that make it look cheap

A few errors separate a convincing glow from an obvious one. The most common is no bloom: a crisp stroke with no blur looks like a selection outline, not light. The second is a visible seam where the gradient wraps, fixed by repeating the first color at the end. The third is a hard edge against the screen corners, which is why the .continuous corner style and an inset matter on devices with rounded displays.

Two more are easy to miss. Running the animation when nothing is happening drains attention and battery, so bind it to state. And forgetting allowsHitTesting(false) makes the overlay swallow taps near the edge. Fix those five and the effect holds up next to the system version. The Apple Intelligence Siri overlay clone covers the matching full-screen treatment when the glow accompanies a Siri-style sheet.

Building the screen around it fast

The glow is a small overlay; the screen underneath is the real work. That screen, a chat surface, a generation view, a results panel, is a known layout worth starting from a design rather than hand-building. VP0 is a free, $0 iOS design library where each screen has a hidden source page an AI builder reads from a pasted link:

Build this iOS screen in SwiftUI.
Read the layout and tokens from this VP0 source page: <pasted VP0 link>.
Add an Apple-Intelligence-style glow: an inset RoundedRectangle stroked with a
rotating AngularGradient, blurred for bloom, shown only while `isThinking` is
true, and reduced to an opacity pulse when Reduce Motion is on.

You get the screen and tokens from the design and add the glow overlay on top, which keeps the effort on the effect instead of the scaffolding.

What to choose

For almost every app, use the animated AngularGradient stroke: inset rounded rectangle, looped colors, a repeatForever rotation, a blur for bloom, and a second softer layer behind it. Bind it to a real thinking state, honor Reduce Motion, and set allowsHitTesting(false). Move up to a Metal shader only when you specifically want organic, non-uniform color, and use a Lottie or Rive file when a designer gives you the exact animation. Start the screen behind the glow from a free VP0 design, generate it with Claude Code or Cursor, and spend your time tuning the bloom on a real device, where blur and color read differently than in the simulator.

Frequently asked questions

How do I create the Apple Intelligence glow border effect in iOS?

Overlay your screen with an inset RoundedRectangle stroked by an AngularGradient, rotate the gradient with a repeatForever animation, and blur the layer for bloom. Repeat the first color at the end so there is no seam, and bind visibility to a real thinking state. Build it in SwiftUI, and start the screen underneath from a free VP0 design with Claude Code or Cursor so your effort goes into the effect, not the layout.

Should I use a Metal shader or an animated gradient for the glow?

Use the animated AngularGradient for nearly every case, since it is a fraction of the code and looks right once you add bloom and remove the seam. Choose a Metal shader through SwiftUI’s colorEffect only when you want organic color that swells and shifts unevenly rather than rotating uniformly, and budget time to test it on a real device.

Does the glow border hurt performance?

A single blurred gradient stroke is cheap, but two mistakes cost frames: animating when nothing is processing, and stacking many heavy blurs. Bind the animation to your thinking state so it stops when idle, keep to one or two blurred layers, and profile on device. A Metal shader needs more care and should be measured on the oldest phone you support.

Can VP0 give me a free SwiftUI template for the screen behind the glow?

Yes. VP0 is a free iOS design library where each screen has an AI-readable source page, so you can browse a chat or generation layout, copy its link, and have Claude Code or Cursor build it in SwiftUI. You then add the glow as an overlay. The design provides the screen and tokens; the effect is the part you layer on.

What makes a glow border look fake?

A crisp stroke with no blur, a visible seam where the gradient wraps, hard corners on a rounded display, and a glow that never turns off. Add bloom, repeat the first gradient color, use the continuous corner style with an inset, and tie visibility to a real state so the glow signals work rather than decorating the screen.