🌈 Building a Rainbow Gradient TextField Border in SwiftUI

lioneldude
Nov 15
2 min read

A fun visual effect using AngularGradient, stroke, and a simple animation.

SwiftUI makes it extremely easy to style views, but some effects — like animated gradient borders — require a small trick. In this short tutorial, we’ll build a TextField with a smooth, rotating rainbow gradient border.

The final effect looks like this:

A rounded rectangle border that cycles smoothly through rainbow colors, glowing softly around the text field.

1. Basic Structure

Start with a simple TextField that uses a FocusState to know when the user is typing:

struct ContentView: View {
    @State private var text: String = ""
    @FocusState private var isFocused: Bool
    @State private var isHighlighted: Bool = false

    var body: some View {
        VStack {
            TextField("Text", text: $text)
                .focused($isFocused)
                .padding(12)
                .background(rainbowGradient())
        }
        .padding()
    }
}

We’re going to draw the gradient behind the text field using .background.

2. Preparing the Rainbow Gradient Colors

To make a smooth rotating effect, we repeat the rainbow sequence twice and flatten it:

let rainbowColors: [Color] = [.red, .orange, .yellow, .green, .blue, .purple, .indigo]
let gradientColors: [Color] = Array(repeating: rainbowColors, count: 2)
    .flatMap { $0 }

Repeating the sequence avoids a hard edge where the gradient wraps.

3. Drawing the Gradient Border

A RoundedRectangle with a gradient .stroke gives us a nice border shape:

RoundedRectangle(cornerRadius: 24)
  .stroke(
        AngularGradient(
            colors: gradientColors,
            center: .center,
            angle: .degrees(isHighlighted ? 360 : 0)
        ),
        style: StrokeStyle(lineWidth: 2.5, lineCap: .round, lineJoin: .round
        )
    )
    .padding(-2)
    .blur(radius: 3)  // soft glow

A few things happening here:

AngularGradient makes a circular color sweep.
We animate the gradient angle from 0 → 360° for rotation.
padding(-2) pulls the border slightly outside the TextField’s layout.
blur(radius: 3) softens it into a glow.

4. Animating the Border

We animate the gradient forever once the view appears:

.onAppear {
    withAnimation(.linear(duration: 7.0).repeatForever(autoreverses: false)) {
        isHighlighted = true
    }
}
.onDisappear {
    isHighlighted = false
}

5. Only Show the Border When the TextField Is Not Focused

If the user is typing, you may want the TextField to look clean.

We can hide the border when focused:

if !isFocused {
    // draw gradient border
}

6. Final Code (Copy & Paste)

Here is the full reusable example:

@ViewBuilder
private func rainbowGradient() -> some View {
    let rainbowColors: [Color] = [.red, .orange, .yellow, .green, .blue, .purple, .indigo]
    let gradientColors: [Color] = Array(repeating: rainbowColors, count: 2)
        .flatMap { $0 }

    if !isFocused {
        RoundedRectangle(cornerRadius: 24)
            .stroke(
                AngularGradient(
                    colors: gradientColors,
                    center: .center,
                    angle: .degrees(isHighlighted ? 360 : 0)
                ),
                style: StrokeStyle(lineWidth: 2.5, lineCap: .round, lineJoin: .round)
            )
            .padding(-2)
            .blur(radius: 3)
            .onAppear {
                withAnimation(.linear(duration: 7.0).repeatForever(autoreverses: false)) {
                    isHighlighted = true
                }
            }
            .onDisappear {
                isHighlighted = false
            }
    }
}