Animated Mesh Gradient

Animated 3x3 mesh gradient background that smoothly transitions between two color palettes with a repeating animation

Free

Free with a ShipSwift account.

Copies a short instruction with your private download link. Paste it into your agent: it downloads the whole skill (the source code, the setup steps and the mistakes we already made for you) and builds the screen.

Works with

+70

What it does

Animated 3x3 mesh gradient background that smoothly transitions between two color palettes using a repeating easeInOut animation. Designed as a full-screen or section background layer. Requires iOS 18+ / macOS 15+ as MeshGradient was introduced in SwiftUI 2024.

What you get

✓62 lines of source code, ready to paste
✓Source Code
✓Usage

animationmeshgradientbackgroundSwiftUI

Usage

// Default indigo/blue/cyan palette
ZStack {
    SWAnimatedMeshGradient()
        .ignoresSafeArea()
    // Your content here
}

// As a section background
myContent
    .background { SWAnimatedMeshGradient() }

// Custom color palette
SWAnimatedMeshGradient(
    paletteA: [
        .red.opacity(0.9),  .orange.opacity(0.85), .yellow.opacity(0.8),
        .orange.opacity(0.85), .red.opacity(0.9),  .orange.opacity(0.85),
        .yellow.opacity(0.8),  .orange.opacity(0.85), .red.opacity(0.9)
    ],
    paletteB: [
        .yellow.opacity(0.8),  .red.opacity(0.9),    .orange.opacity(0.85),
        .red.opacity(0.85),    .orange.opacity(0.9),  .yellow.opacity(0.85),
        .orange.opacity(0.85), .yellow.opacity(0.8),  .red.opacity(0.9)
    ]
)

// Custom animation duration
SWAnimatedMeshGradient(duration: 8.0)