title: How can I implement the iMessage gradient in Swift iOS?
body: <p><strong>What I'm trying to Achieve</strong></p>
  <p>I am trying to implement the gradient bubble effect in Swift iOS, where the chat bubbles towards the top are a lighter color and the chat bubbles towards the bottom are a darker color, and when you scroll a bubble you see the gradient change.</p>
  <p>The link below is an example of the iMessage gradient effect.</p>
  <p><a href="https://i.stack.imgur.com/e4doX.jpg" rel="nofollow noreferrer">An example image of the iMessage gradients</a></p>
  <p><strong>What I've Tried</strong></p>
  <ol>
  <li>I created a view and added a gradient layer:</li>
  </ol>
  <pre class="lang-swift prettyprint-override"><code>let gradient = CAGradientLayer()
  gradient.startPoint = CGPoint(x: 1, y: 0)
  gradient.endPoint = CGPoint(x: 0, y: 1)
  gradient.colors = [UIColor.systemBlue.cgColor, UIColor.systemPink.cgColor]
  gradient.frame = UIScreen.main.bounds
  
  view.layer.addSublayer(gradient)
  view.backgroundColor = .yellow
  </code></pre>
  <ol start="2">
  <li>I created a view and used it as a mask</li>
  </ol>
  <pre class="lang-swift prettyprint-override"><code>mask.backgroundColor = .yellow
  mask.alpha = 1
  mask.frame.size = CGSize(width: 100, height: 100)
  mask.center = view.center
  view.mask = mask
  </code></pre>
  <p>The result is like this Gif below:</p>
  <p><a href="https://i.stack.imgur.com/NftsB.gif" rel="nofollow noreferrer">Example of my progress using a Mask View</a></p>
  <p>I was originally hoping to add a gradient to a <code>UICollectionView</code> and have the <code>UICollectionViewCells</code> mask the gradient to achieve the above iMessage gradient effect, but then I realized I can only apply one mask to a <code>UIView</code> (not multiple), so I'm stuck on using this approach.</p>
  <p><strong>Other Ideas</strong>
  My other ideas were to apply a gradient to each <code>UICollectionViewCell</code> and determine the gradient offset of each <code>UICollectionViewCell</code> manually based on the location of the cell, however, my main concern is this is not going to have good performance.</p>
  <p><strong>Please Help</strong>
  I was hoping to see if anyone could outline a general method or link to how to achieve the iMessage gradient background effect?</p>
  <p>I understand this is a more general question and often times general questions are &quot;bad&quot; questions for stack overflow, but I'm really stuck on this problem and would incredibly appreciate any help or advice for achieving this effect!</p>
  <p>Thank you for your time!</p>
  <h2>Solution Figured Out</h2>
  <p>Wow, this is sketchy/hacky to implement. Below is a GitHub Gist of how its done.</p>
  <p><a href="https://gist.github.com/josharnoldjosh/e04d41f10de6ab378da931ab11370d11" rel="nofollow noreferrer">https://gist.github.com/josharnoldjosh/e04d41f10de6ab378da931ab11370d11</a></p>
  <p>The way it works is you set a background to the gradient, then, you mask each individual cell, &quot;cutting out&quot; a hole in the cell to be transparent. The rest of the cell must be white to simulate the background being white.</p>