Set Background Gradient on Button in Swift

Your code works fine. You just have to remember to set the gradient's frame every time. It is better to just make the gradient category also set the frame of the view for you.

That way you don't forget and it applies fine.

import UIKitextension UIView {    @discardableResult    func applyGradient(colours: [UIColor]) -> CAGradientLayer {        return self.applyGradient(colours: colours, locations: nil)    }    @discardableResult    func applyGradient(colours: [UIColor], locations: [NSNumber]?) -> CAGradientLayer {        let gradient: CAGradientLayer = CAGradientLayer()        gradient.frame = self.bounds        gradient.colors = colours.map { $0.cgColor }        gradient.locations = locations        self.layer.insertSublayer(gradient, at: 0)        return gradient    }}class ViewController: UIViewController {    @IBOutlet weak var btn: UIButton!    override func viewDidLoad() {        super.viewDidLoad()        self.btn.applyGradient(colours: [.yellow, .blue])        self.view.applyGradient(colours: [.yellow, .blue, .red], locations: [0.0, 0.5, 1.0])    }}

Buttons are views. You apply gradients to it the same way you would apply it to any other view.

Picture Proof:

Video Proof:https://i.imgur.com/ssDTqPu.mp4

It's this simple:

import UIKitclass ActualGradientButton: UIButton {    override func layoutSubviews() {        super.layoutSubviews()        gradientLayer.frame = bounds    }    private lazy var gradientLayer: CAGradientLayer = {        let l = CAGradientLayer()        l.frame = self.bounds        l.colors = [UIColor.systemYellow.cgColor, UIColor.systemPink.cgColor]        l.startPoint = CGPoint(x: 0, y: 0.5)        l.endPoint = CGPoint(x: 1, y: 0.5)        l.cornerRadius = 16        layer.insertSublayer(l, at: 0)        return l    }()}

Here below you can find the solution for Swift3 (and Swift4 too) and a little bit extended (orientation helper):

typealias GradientPoints = (startPoint: CGPoint, endPoint: CGPoint)enum GradientOrientation {    case topRightBottomLeft    case topLeftBottomRight    case horizontal    case vertical    var startPoint : CGPoint {        return points.startPoint    }    var endPoint : CGPoint {        return points.endPoint    }    var points : GradientPoints {        switch self {        case .topRightBottomLeft:            return (CGPoint(x: 0.0,y: 1.0), CGPoint(x: 1.0,y: 0.0))        case .topLeftBottomRight:            return (CGPoint(x: 0.0,y: 0.0), CGPoint(x: 1,y: 1))        case .horizontal:            return (CGPoint(x: 0.0,y: 0.5), CGPoint(x: 1.0,y: 0.5))        case .vertical:            return (CGPoint(x: 0.0,y: 0.0), CGPoint(x: 0.0,y: 1.0))        }    }}extension UIView {    func applyGradient(with colours: [UIColor], locations: [NSNumber]? = nil) {        let gradient = CAGradientLayer()        gradient.frame = self.bounds        gradient.colors = colours.map { $0.cgColor }        gradient.locations = locations        self.layer.insertSublayer(gradient, at: 0)    }    func applyGradient(with colours: [UIColor], gradient orientation: GradientOrientation) {        let gradient = CAGradientLayer()        gradient.frame = self.bounds        gradient.colors = colours.map { $0.cgColor }        gradient.startPoint = orientation.startPoint        gradient.endPoint = orientation.endPoint        self.layer.insertSublayer(gradient, at: 0)    }}