title: How to add gradient in UIBezierPath iOS
body: <p>How to add a gradient in <code>UIBezierPath</code>, I have a draw path in my <code>UITabbar</code> but I am not able to add a <code>gradient</code> in draw path, I don't want to apply as <code>UITababr</code> background, I want to apply only in draw path.</p>
  
  <p>below is my code </p>
  
  <pre><code> private func addShape() {
          let shapeLayer = CAShapeLayer()
          shapeLayer.path = createPath()
          shapeLayer.lineWidth = 1.0
          if let oldShapeLayer = self.shapeLayer {
              tabBar.layer.replaceSublayer(oldShapeLayer, with: shapeLayer)
          } else {
              tabBar.layer.insertSublayer(shapeLayer, at: 0)
          }
          self.shapeLayer = shapeLayer
  
      }
  
  
  
      func createPath() -&gt; CGPath {
  
  
  
          let height: CGFloat = 33
  
          let path = UIBezierPath()
  
          let centerWidth = self.view.frame.width / 2
  
  
  
          path.move(to: CGPoint(x: 42, y: 0)) // start top left
  
          path.addLine(to: CGPoint(x: (centerWidth - height * 1.5), y: 0)) // the beginning of the trough
  
  
  
          path.addCurve(to: CGPoint(x: centerWidth, y: height),
  
                        controlPoint1: CGPoint(x: (centerWidth - 30), y: 0), controlPoint2: CGPoint(x: centerWidth - 35, y: height))
  
          // second curve up
  
          path.addCurve(to: CGPoint(x: (centerWidth + height * 2), y: 0),
  
                        controlPoint1: CGPoint(x: centerWidth + 35, y: height), controlPoint2: CGPoint(x: (centerWidth + 30), y: 0))
  
  
  
          // complete the rect
  
          path.addLine(to: CGPoint(x: self.view.frame.width-42, y: 0))
  
  
  
  
  
          // Added curve for right side
  
          path.addCurve(to: CGPoint(x: self.tabBar.frame.width-10, y: 25),
  
                        controlPoint1: CGPoint(x: self.tabBar.frame.width-20, y: 5),
  
                        controlPoint2: CGPoint(x: self.tabBar.frame.width-10, y: 15))
  
          path.addCurve(to: CGPoint(x: self.tabBar.frame.width - 50, y: self.tabBar.frame.height-10),
  
                        controlPoint1: CGPoint(x: self.tabBar.frame.width - 10, y: self.tabBar.frame.height-30),
  
                        controlPoint2: CGPoint(x: self.tabBar.frame.width - 10, y: self.tabBar.frame.height-10))
  
          path.addLine(to: CGPoint(x: 50, y: self.tabBar.frame.height - 10))
  
          // Added curve for left side
  
          path.addCurve(to: CGPoint(x: 10, y: 25),
  
                        controlPoint1: CGPoint(x: 10, y: self.tabBar.frame.height-10),
  
                        controlPoint2: CGPoint(x: 10, y: self.tabBar.frame.height-30 ))
  
          path.addCurve(to: CGPoint(x: 42, y: 0),
  
                        controlPoint1: CGPoint(x: 10, y: 15),
  
                        controlPoint2: CGPoint(x: 20, y: 5))
  
          path.close()
  
  
  
          return path.cgPath
  
      }
  </code></pre>