EffectsEffect ModifiersAdvanced

SwiftUI drawingGroup and Compositing Effects

Use compositingGroup and drawingGroup to control how SwiftUI combines effects, shadows, opacity, and complex drawing.

5 min readUpdated 2026-06

drawingGroup compositingGroup blur opacity blendMode

Unified shadow group

import SwiftUI

struct LogoCluster: View {
    var body: some View {
        ZStack {
            Circle().fill(.teal).frame(width: 64, height: 64)
            Circle().fill(.blue).frame(width: 64, height: 64).offset(x: 34)
            Circle().fill(.purple).frame(width: 64, height: 64).offset(x: 17, y: 30)
        }
        .compositingGroup()
        .shadow(color: .black.opacity(0.18), radius: 14, y: 8)
    }
}

Use this when

A group of child views should receive an effect as one rendered unit.

Complex vector drawing or animation needs off-screen rendering for smoother output.

Blend modes and opacity produce different results per child than on the final group.

Avoid this when

The view hierarchy is simple and already performs well.

The off-screen render would be larger than necessary.

You are using it as a blind fix without measuring.

Implementation notes

compositingGroup changes whether later effects apply to children separately or to the combined result.

drawingGroup can help complex vector rendering, but it also creates an off-screen image.

Effects like blur, shadow, and opacity are easier to reason about when you know the compositing boundary.

Checklist

Measure before and after when using drawingGroup for performance.

Keep the composited area as small as practical.

Check colors in dark mode when blend modes are involved.

Related reference

SwiftUI Canvas Drawing Context

Use Canvas when a visual is easier to draw than compose from many nested views, such as sparklines, badges, waveforms, and lightweight charts.

SwiftUI Gradients and ShapeStyle

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

SwiftUI clipShape, mask, and contentShape

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