DrawingPaintsIntermediate

SwiftUI Gradients and ShapeStyle

Choose linear, radial, angular, image, and mesh-style fills based on the job the color is doing in the interface.

5 min readUpdated 2026-06

LinearGradient RadialGradient AngularGradient MeshGradient foregroundStyle

Reusable gradient badge

import SwiftUI

struct GradientBadge: View {
    var body: some View {
        Text("Pro")
            .font(.caption.bold())
            .padding(.horizontal, 10)
            .padding(.vertical, 6)
            .foregroundStyle(.white)
            .background(
                LinearGradient(
                    colors: [.teal, .blue],
                    startPoint: .topLeading,
                    endPoint: .bottomTrailing
                ),
                in: Capsule()
            )
    }
}

Use this when

A flat color needs depth, state, or direction without adding imagery.

You want one color treatment to work as fill, stroke, background, or foreground style.

The page needs lightweight visual distinction while staying native to SwiftUI.

Avoid this when

The gradient is only decoration and competes with content.

Text contrast becomes unpredictable across stops.

You need brand-approved artwork that should ship as an asset.

Implementation notes

ShapeStyle lets the same color idea be applied through fill, stroke, background, or foregroundStyle.

Linear gradients communicate direction, radial gradients communicate focus, and angular gradients work well for circular elements.

Mesh gradients can look premium, but use them sparingly because they are visually dominant.

Checklist

Check text contrast over every visible stop.

Keep gradients subtle in dense productivity screens.

Use semantic color tokens when the gradient represents state.

Related reference

SwiftUI foregroundStyle and tint

Prefer foregroundStyle and tint for modern SwiftUI color styling, especially when controls, symbols, gradients, and semantic materials mix.

SwiftUI Shapes, Path, Trim, and Stroke

Build reusable visual primitives with Shape, Path, stroke, fill, and trim instead of baking every decoration into image assets.

SwiftUI Overlay, Background, and zIndex

Layer views deliberately with background, overlay, and zIndex while keeping the base layout stable.