How to make a UIView fade out
Swift version: 5.10
All views naturally fill the space assigned to them, but using CAGradientLayer as a mask view you can force a view to fade out at its edges.
To try it out, first create a test view with some obvious content like a background color:
let maskedView = UIView(frame: CGRect(x: 50, y: 50, width: 256, height: 256))
maskedView.backgroundColor = .blueThe next step is to create a CAGradientLayer at the same size as the view you want to mask:
let gradientMaskLayer = CAGradientLayer()
gradientMaskLayer.frame = maskedView.boundsNow for the important part: to make the gradient work you need to use a clear color where nothing should be shown (where your view should be invisible) and white where the view should shine through fully.
By default GAGradientLayer spaces out its colors so they appear at equal distances, but we’re going to tell it to put the first color at 0, the second color at 0.1 (10% of the way in), the third color at 0.9 (90% of the way in), then the last color at 1 (the end). This 80% of our view is shown with full opacity:
gradientMaskLayer.colors = [UIColor.clear.cgColor, UIColor.white.cgColor, UIColor.white.cgColor, UIColor.clear.cgColor]
gradientMaskLayer.locations = [0, 0.1, 0.9, 1]Finally, you just need to add that mask to your view, then add the whole thing to a parent view so it can be shown:
maskedView.layer.mask = gradientMaskLayer
view.addSubview(maskedView)
SPONSORED Alex is the iOS & Mac developer’s ultimate AI assistant. It integrates with Xcode, offering a best-in-class Swift coding agent. Generate modern SwiftUI from images. Fast-apply suggestions from Claude 3.5 Sonnet, o3-mini, and DeepSeek R1. Autofix Swift 6 errors and warnings. And so much more. Start your 7-day free trial today!
Sponsor Hacking with Swift and reach the world's largest Swift community!
Available from iOS 3.0
Similar solutions…
- How to mask one UIView using another UIView
- How to get bordered buttons that stand out
- How to break out of multiple loop levels using labeled statements
- How to spell out numbers using NumberFormatter's spellOut style
- How to make a UIView fill the screen using Auto Layout anchors
About the Swift Knowledge Base
This is part of the Swift Knowledge Base, a free, searchable collection of solutions for common iOS questions.
