SwiftUI.cc
Snippets
EffectsEffect ModifiersIntermediate

SwiftUI clipShape, mask, and contentShape

Clipping controls what is visible, masking controls alpha, and contentShape controls where interaction happens.

5 min readUpdated 2026-06
Rounded card with full-row tap target
import SwiftUI

struct TappableCard: View {
    var body: some View {
        HStack {
            Image(systemName: "sparkles")
            VStack(alignment: .leading) {
                Text("New Template").font(.headline)
                Text("Ready to customize").foregroundStyle(.secondary)
            }
            Spacer()
        }
        .padding()
        .background(.background, in: RoundedRectangle(cornerRadius: 16))
        .clipShape(RoundedRectangle(cornerRadius: 16))
        .contentShape(RoundedRectangle(cornerRadius: 16))
        .onTapGesture { openTemplate() }
    }
}
Use this when

A visual should be cropped to a rounded rectangle, circle, or custom shape.

Opacity from another view should determine the visible area.

The tappable area should be larger or different from the visible content.

Avoid this when

You only need a border; use overlay or stroke instead.

The mask makes text contrast hard to predict.

The content shape hides interaction behavior from users.

Implementation notes

clipShape affects rendering; it does not automatically redefine the hit area in every layout.
contentShape is especially useful for rows with spacers or transparent padding.
mask is powerful for reveals and text effects, but it can complicate readability.

Checklist

Verify the tappable area with real taps, not just visual inspection.

Use the same corner radius for background, clipping, and hit shape when they should match.

Avoid clipping shadows unless the design intentionally removes them.

Related reference