title: How to Add a CAGradientLayer to a CAShapeLayer?
body: <p>I am trying to add a CAGradientLayer to a CAShapeLayer, but the gradient is not conforming to the shape of the layer. Instead, the gradient is taking the shape of the UIView itself. I originally attempted this with a UIBezierPath but it did not work either. I am trying to put a gradient into my shape.</p>
  
  <pre><code>  override func drawRect(rect: CGRect) {
          let bounds = CGRect(x: 0, y: 0, width: self.bounds.width, height: self.bounds.height)
          let center = self.center
  
          let path = CAShapeLayer()
          path.bounds = bounds
          path.position = CGPoint(x: center.x, y: center.y)
          //path.backgroundColor = UIColor.redColor().CGColor
          path.cornerRadius = 20
          //self.layer.addSublayer(path)
          let gradientLayer = CAGradientLayer()
          gradientLayer.frame = path.bounds
          gradientLayer.colors = [cgColorForRed(209.0, green: 0.0, blue: 0.0),
              cgColorForRed(255.0, green: 102.0, blue: 34.0),
              cgColorForRed(255.0, green: 218.0, blue: 33.0),
              cgColorForRed(51.0, green: 221.0, blue: 0.0),
              cgColorForRed(17.0, green: 51.0, blue: 204.0),
              cgColorForRed(34.0, green: 0.0, blue: 102.0),
              cgColorForRed(51.0, green: 0.0, blue: 68.0)]
          gradientLayer.startPoint = CGPoint(x:0,y:0)
          gradientLayer.endPoint = CGPoint(x:0, y:1)
          path.insertSublayer(gradientLayer, atIndex: 1)
          self.layer.addSublayer(path)
  
  
      }
  
      func cgColorForRed(red: CGFloat, green: CGFloat, blue: CGFloat ) -&gt; AnyObject {
          return UIColor(red: red/255.0, green: green/255.0, blue: blue/255.5, alpha: 1.0).CGColor as AnyObject
      }
  </code></pre>
  
  <p>Originally I had path defined to be a UIBezierPath of a rectangle with rounded corners which I am looking to fill with the gradient:</p>
  
  <pre><code>        let insetRect = CGRectInset(rect, lineWidth / 2, lineWidth / 2)
  
          let path = UIBezierPath(roundedRect: insetRect, cornerRadius: 10)
  
          fillColor.setFill()
          path.fill()
  
          path.lineWidth = self.lineWidth
          UIColor.blackColor().setStroke()
          path.stroke()
  </code></pre>
  
  <p>Edit from Larcerax's response:</p>
  
  <pre><code>class Thermometer: UIView {
  
      //@IBInspectable var fillColor: UIColor = UIColor.greenColor()
      let lineWidth: CGFloat = 2
  
      override func drawRect(rect: CGRect) {
  
          let context = UIGraphicsGetCurrentContext()
          let svgid = CGGradientCreateWithColors(CGColorSpaceCreateDeviceRGB(), [cgColorForRed(209.0, green: 0.0, blue: 0.0),
              cgColorForRed(255.0, green: 102.0, blue: 34.0),
              cgColorForRed(255.0, green: 218.0, blue: 33.0),
              cgColorForRed(51.0, green: 221.0, blue: 0.0),
              cgColorForRed(17.0, green: 51.0, blue: 204.0),
              cgColorForRed(34.0, green: 0.0, blue: 102.0),
              cgColorForRed(51.0, green: 0.0, blue: 68.0)], [0,1])
          CGContextSaveGState(context)
          let insetRect = CGRectInset(rect, lineWidth / 2, lineWidth / 2)
  
          let path = UIBezierPath(roundedRect: insetRect, cornerRadius: 10)
          path.addClip()
          CGContextDrawLinearGradient(context, svgid, CGPoint(x: 0, y: path.bounds.height),
              CGPoint(x: path.bounds.width, y: path.bounds.height),
              UInt32(kCGGradientDrawsBeforeStartLocation) | UInt32(kCGGradientDrawsAfterEndLocation))
          CGContextRestoreGState(context)
  }
  </code></pre>