How to blend views together
Updated for Xcode 16.4
When placing one view over another, you can control the way they overlap by using the blendMode() modifier. This contains a variety of ways you can mix colors together, such as using their difference or using a color burn – these will be familiar if you’ve used Core Graphics or something like Photoshop before.
To demonstrate this we could create a ZStack with two overlapping circles inside, where the second has a .multiply blend mode so that it darkens the colors behind it:
ZStack { Circle() .fill(.red) .frame(width: 200, height: 200) .offset(x: -50) .blendMode(.screen) Circle() .fill(.blue) .frame(width: 200, height: 200) .offset(x: 50) .blendMode(.screen) } .frame(width: 400)
Download this as an Xcode project
SAVE 50% All our books and bundles are half price for Black Friday, so you can take your Swift knowledge further for less! Get my all-new book Everything but the Code to make more money with apps, get the Swift Power Pack to build your iOS career faster, get the Swift Platform Pack to builds apps for macOS, watchOS, and beyond, or get the Swift Plus Pack to learn Swift Testing, design patterns, and more.
Similar solutions…
- How to combine text views together
- How to group views together
- How to group views together with ControlGroup
- Composing views to create a list row
- How to use @EnvironmentObject to share data between views
