How to create a gradient which goes from full color to opacity of 0 in iOS?

Question

I have looked here, but based on their example, which I tried and show below, did not work. It was not able to accomplish the following. I am looking to create a gradient from full black to a full black with opacity of 0:

@IBDesignable
final class GradientView: UIView {
    @IBInspectable var startColor: UIColor = UIColor.clear
    @IBInspectable var endColor: UIColor = UIColor.clear

    override func draw(_ rect: CGRect) {
        let gradient: CAGradientLayer = CAGradientLayer()
//        gradient.frame = bounds
        gradient.frame = CGRect(x: CGFloat(0),
                                y: CGFloat(0),
                                width: superview!.frame.size.width,
                                height: superview!.frame.size.height)
        gradient.colors = [startColor.cgColor, endColor.cgColor]
        gradient.zPosition = -1
        layer.addSublayer(gradient)
    }
}

How can I achieve this, preferably in the interface builder?

If you want the colors to be black, why do you use `clearColor`? Use `.blackColor` and `.blackColor.withAlphaComponent(0)`. — rmaddy, Jun 14 '19 at 21:05
Note that, because `CGColor`s use premultiplied alpha, `UIColor.clear == UIColor.black.withAlphaComponent(0)`. — rob mayoff, Jun 14 '19 at 21:36

score 0 · Answer 1 · answered Jun 14 '19 at 21:25

Following is my implementation

@IBDesignable
final class GradientView: UIView {
    override func draw(_ rect: CGRect) { 
        //// General Declarations
        let context = UIGraphicsGetCurrentContext()!


        //// Gradient Declarations
        let gradient = CGGradient(colorsSpace: nil, colors: [UIColor.white.cgColor, 
     UIColor.white.blended(withFraction: 0.5, of: UIColor.black).cgColor, 
    UIColor.black.cgColor] as CFArray, locations: [0, 0.51, 0.89])!

    //// Rectangle Drawing
    let rectangleRect = CGRect(x: frame.minX + 11, y: frame.minY + 8, width: 85, height: 54)
    let rectanglePath = UIBezierPath(rect: rectangleRect)
    context.saveGState()
    rectanglePath.addClip()
    context.drawLinearGradient(gradient,
        start: CGPoint(x: rectangleRect.midX, y: rectangleRect.minY),
        end: CGPoint(x: rectangleRect.midX, y: rectangleRect.maxY),
        options: [])
    context.restoreGState()
    }
}

score 0 · Accepted Answer · 2019-06-29T01:24:31.250

What I ended up doing is the following:

  private func setupGradient() { 

    //Below for container
    gradientViewContainer.frame = CGRect(x: 0, y: 152, width: 117, height: 38) 
    gradientViewContainer.isHidden = true

    //Below for actual gradient
    gradientLayer.frame = CGRect(x: 0, y: 152, width: gradientViewContainer.frame.width, height: gradientViewContainer.frame.height)

    gradientLayer.startPoint = CGPoint(x: 1.0, y: 0.0)
    gradientLayer.endPoint = CGPoint(x: 1.0, y: 1.0)

    gradientLayer.colors = [UIColor.black.withAlphaComponent(0.0).cgColor, UIColor.black.withAlphaComponent(0.7).cgColor, UIColor.black.withAlphaComponent(0.7).cgColor,  UIColor.black.withAlphaComponent(1.0).cgColor]
    gradientLayer.locations = [0.0, 1.0]

    gradientViewContainer.layer.insertSublayer(gradientLayer, at: 0)
    gradientViewContainer.alpha = 0.65

}

Then in viewDidLoad:

    setupGradient()
    myView.layer.addSublayer(gradientLayer)

How to create a gradient which goes from full color to opacity of 0 in iOS?

2 Answers2