Add an inner shadow to a symbol image in SwiftUI

SwiftUI offers a great variety of APIs to define and customize image views with SF Symbols to create beautiful icons with minimal effort. One of the lesser known techniques is the ability to apply a foreground style with an inner shadow to create an icon that looks like it's cut out of its background.

Image(systemName: "cloud.rain")
    .symbolVariant(.circle)
    .foregroundStyle(
        .indigo
            .shadow(.inner(radius: 2))
    )

We can set different shadow radii and colors to make the effect stronger or more subtle. This works especially well with circular or rounded symbol variants when we want icons that feel slightly inset into the surface instead of sitting on top of it.

Deepen your understanding of SwiftUI!$35

The essential guide to SwiftUI core concepts and APIs

SwiftUI Fundamentalsby Natalia Panferova

• Explore the key APIs and design patterns that form the foundation of SwiftUI
• Develop a deep, practical understanding of how SwiftUI works under the hood
• Learn from a former Apple engineer who worked on widely used SwiftUI APIs

Deepen your understanding of SwiftUI!

The essential guide to SwiftUI core concepts and APIs

SwiftUI Fundamentals

by Natalia Panferova

$35