Set Background Gradient on Button in Swift

Question

I have no idea how to set the background gradient on a button (without making the background gradient an image). This is so different from Android.

Here's a class I have to define a returnable gradient scheme:

import UIKit

extension CAGradientLayer {

    func backgroundGradientColor() -> CAGradientLayer {
        let topColor = UIColor(red: (0/255.0), green: (153/255.0), blue:(51/255.0), alpha: 1)
        let bottomColor = UIColor(red: (0/255.0), green: (153/255.0), blue:(255/255.0), alpha: 1)

        let gradientColors: [CGColor] = [topColor.CGColor, bottomColor.CGColor]
        let gradientLocations: [Float] = [0.0, 1.0]

        let gradientLayer: CAGradientLayer = CAGradientLayer()
        gradientLayer.colors = gradientColors
        gradientLayer.locations = gradientLocations

        return gradientLayer

    }
}

I can use this to set the background of my entire view with the following:

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        let background = CAGradientLayer().backgroundGradientColor()
        background.frame = self.view.bounds
        self.view.layer.insertSublayer(background, atIndex: 0)
    }
    //...
}

But how can I access the view of the button and insert the sublayer or something like that?

the simple answer to OP's question here is that *you cannot do this in a view controller* - you just subclass the view. It's a line or two of code. — Fattie, Oct 16 '19 at 11:20

score 77 · Accepted Answer · edited Dec 17 '21 at 16:54

77

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 UIKit

extension UIView {

    func applyGradient(colours: [UIColor]) -> CAGradientLayer {
        return self.applyGradient(colours: colours, locations: nil)
    }


    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

edited Dec 17 '21 at 16:54

iosMentalist

3,066
1
30
40

answered Jun 19 '16 at 02:15

Brandon

22,723
11
93
186

12

I don't agree with the last sentence. While buttons are views, button background is not the same as view background. Button background can change depending on button state. When adding gradient as a layer, we lose that effect. The ideal solution is to capture the gradient layer into an image an set the image as the button background image. Another problem is that the layer bounds should be updated always when the button frame changes, that is, from `layoutSubviews`. – Sulthan Jul 28 '17 at 18:36
For the record, I know exactly what you are talking about, but it does NOT apply to this post which is storyboard constraint based (not in-code run-time constraints or frames). Since I have posted video proof of the code working and it satisfied OP's need and is accepted more than 3 years ago with currently 48 people agreeing, I will delete my comments to clean up this thread and forget that I've read what I've read.. – Brandon Oct 16 '19 at 15:49
to simplify the discussion, in iOS when you add a CALayer, you must set the frame in `layoutSubviews` (Indeed this is literally why `layoutSubviews` exists.) {in the example try changing the *shape or size* of the views, or, very simply, rotate the phone} – Fattie Apr 30 '20 at 15:59
@Fattie; iOS will NOT crash if a view/layer's frame isn't set and the video that I have posted seems to show this working without setting the frame. If it's crashing, you have a different issue. Here is another video of myself animating the button's position: https://i.imgur.com/vQfsvtO.mp4 just fine with out crashing.. Changing the position of a layer or view does NOT invalidate its constraints or gradient. Only changing the **size** would require `layoutSubviews` OR require you to do exactly what I said: `You just have to remember to set the gradient's frame every time`.. – Brandon Apr 30 '20 at 16:00
https://i.imgur.com/hFaQM3C.mp4 A 3rd video showing no need to override layout subviews to animate the gradient's size and position and rotation.. It may be convenient for some people to override (in a child/sub class) it but it absolutely isn't necessary especially when you cannot subclass the view.. No one is going to subclass/inherit a button just to create a gradient and override layoutSubviews in the subclass. And with that said, I will leave my answer the way it was 4 years ago as it's still valid and still works to this day. – Brandon Apr 30 '20 at 16:34

Fattie · Answer 2 · 2019-10-15T12:58:21.143

44

It's this simple:

import UIKit
class 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
    }()
}

edited Oct 15 '19 at 12:58

answered Oct 14 '19 at 21:13

Fattie

27,874
70
431
719

Especially fits the case when using AutoLayout – black_pearl Apr 16 '20 at 03:18
3

@black_pearl - by all means, yes, it works flawlessly w/ AutoLayout. BTW the downvote and "deletion request" (???) on this answer are totally bizarre :) – Fattie Apr 16 '20 at 10:53

Zeb · Answer 3 · 2018-10-14T20:13:44.657

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)
    }
}

Unfortunately this is completely, totally, wrong for the reasons explained at length on the other answer. In iOS you can > only < add a CALayer by making a subclass of a view. (Fortunately that is totally trivial - one or two lines of code.) The two extensions above simply and literally don't work because they don't in any way size the layer. — Fattie, Oct 16 '19 at 12:14

score 12 · Answer 4 · edited Oct 14 '19 at 20:21

@Zeb answer is great but just to clean it up and make it a little more swifty. Computed read-only properties should avoid using get and returning Void is redundant:

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(withColours colours: [UIColor], locations: [NSNumber]? = nil) {
    let gradient: CAGradientLayer = CAGradientLayer()
    gradient.frame = self.bounds
    gradient.colors = colours.map { $0.cgColor }
    gradient.locations = locations
    self.layer.insertSublayer(gradient, at: 0)
}

func applyGradient(withColours colours: [UIColor], gradientOrientation orientation: GradientOrientation) {
    let gradient: CAGradientLayer = 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)
  }
}

This works fine, i tried to set UIButton cornerRadius, but its not taking any effect unless i remove gradient, is there a way to solve this? — SimpuMind, Apr 12 '17 at 15:40
Unfortunately this is completely wrong. It's an absolute basic of iOS engineering that when you add a layer you have to shape it in `layoutSubviews` (Indeed this is literally why `layoutSubviews` exists.) — Fattie, Apr 04 '20 at 14:47
yes. The answer should be updated to remove existing gradientLayer before adding new. add the following lines before insertSublayer. layer.name = "gradientLayer" self.layer.sublayers.filter {$0.name == layer.name }.first?.removeFromSuperLayer() — Pranay Chander, Feb 10 '21 at 13:33

Rob · Answer 5 · 2021-03-22T01:22:20.280

If you want a gradient background on a button, rather than adding the gradient as a sublayer and changing its frame in layoutSubviews, I would instead just specify the layerClass of the button to be a CAGradientLayer, so the main layer is a gradient:

@IBDesignable
public class GradientButton: UIButton {
    public override class var layerClass: AnyClass         { CAGradientLayer.self }
    private var gradientLayer: CAGradientLayer             { layer as! CAGradientLayer }

    @IBInspectable public var startColor: UIColor = .white { didSet { updateColors() } }
    @IBInspectable public var endColor: UIColor = .red     { didSet { updateColors() } }

    // expose startPoint and endPoint to IB

    @IBInspectable public var startPoint: CGPoint {
        get { gradientLayer.startPoint }
        set { gradientLayer.startPoint = newValue }
    }

    @IBInspectable public var endPoint: CGPoint {
        get { gradientLayer.endPoint }
        set { gradientLayer.endPoint = newValue }
    }

    // while we're at it, let's expose a few more layer properties so we can easily adjust them in IB

    @IBInspectable public var cornerRadius: CGFloat {
        get { layer.cornerRadius }
        set { layer.cornerRadius = newValue }
    }

    @IBInspectable public var borderWidth: CGFloat {
        get { layer.borderWidth }
        set { layer.borderWidth = newValue }
    }

    @IBInspectable public var borderColor: UIColor? {
        get { layer.borderColor.flatMap { UIColor(cgColor: $0) } }
        set { layer.borderColor = newValue?.cgColor }
    }

    // init methods

    public override init(frame: CGRect = .zero) {
        super.init(frame: frame)
        updateColors()
    }

    required init?(coder: NSCoder) {
        super.init(coder: coder)
        updateColors()
    }
}

private extension GradientButton {
    func updateColors() {
        gradientLayer.colors = [startColor.cgColor, endColor.cgColor]
    }
}

By setting the layerClass, it will just make the main layer be a gradient, which automatically is adjusted to the bounds of the button for you. This has an advantage that if you animate the changing of the button size (e.g. on rotation events or whatever), the gradient will be correctly animated, too.

And, it is not necessary, but it may be convenient to make this class an @IBDesignable, so one can set its properties in IB, and it will be correctly rendered in the storyboard/NIB with no additional code in the view controller. For example, I can customize the corners, border, and gradient colors and direction in IB:

This is the perfect solution. It even works in mixed environment with obj-c files, just add @objc to the class — BootMaker, Sep 05 '22 at 07:37

score 5 · Answer 6 · answered Oct 29 '18 at 11:06

Try this is working for me ,

     let button = UIButton(frame: CGRect(x: 60, y: 150, width: 200, height: 60))
    button.setTitle("Email", for: .normal)
    button.backgroundColor = .red
    button.setTitleColor(UIColor.black, for: .normal)
    button.addTarget(self, action: #selector(self.buttonTapped), for: .touchUpInside)

    // Apply Gradient Color
    let gradientLayer:CAGradientLayer = CAGradientLayer()
    gradientLayer.frame.size = button.frame.size
    gradientLayer.colors =
        [UIColor.white.cgColor,UIColor.green.withAlphaComponent(1).cgColor]
    //Use diffrent colors
    button.layer.addSublayer(gradientLayer)
    self.view.addSubview(button)

You can add starting and end point of gradient color.

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

For more details description refer CAGradientLayer doc

Unfortunately this is completely wrong. It's an absolute basic of iOS engineering that when you add a layer you have to shape it in `layoutSubviews` (Indeed this is literally why `layoutSubviews` exists.) — Fattie, Apr 04 '20 at 14:48
yes. The answer should be updated to remove existing gradientLayer before adding new. add the following lines before insertSublayer. layer.name = "gradientLayer" self.layer.sublayers.filter {$0.name == layer.name }.first?.removeFromSuperLayer() — Pranay Chander, Feb 10 '21 at 13:33

score 2 · Answer 7 · answered Jul 28 '17 at 16:41

2

I have tried all of them this is my button init inside of viewdidload

let button = UIButton()
    button.setTitle("Alper", for: .normal)
    button.layer.borderColor = UIColor.white.cgColor
    button.layer.borderWidth = 1
    view.addSubview(button)
    button.anchor(top: nil, left: nil, bottom: logo.topAnchor, right: nil, paddingTop: 0, paddingLeft: 0, paddingBottom: 0, paddingRight: 0, height: 50, width: 100)
    let gradientx = CAGradientLayer()
    gradientx.colors = [UIColor.blue,UIColor.red]
    gradientx.startPoint = CGPoint(x: 0.0, y: 0.5)
    gradientx.endPoint = CGPoint(x: 1.0, y: 1.0)
    gradientx.frame = button.bounds
    button.layer.insertSublayer(gradientx, at: 0)

anchor is an extension, so this is irrelevant gradient.

answered Jul 28 '17 at 16:41

Alper

1,415
2
13
20

1

Unfortunately this is completely wrong. It's an absolute basic of iOS engineering that when you add a layer you have to shape it in `layoutSubviews` (Indeed this is literally why `layoutSubviews` exists.) – Fattie Apr 04 '20 at 14:47
1

yes. The answer should be updated to remove existing gradientLayer before adding new. add the following lines before insertSublayer. layer.name = "gradientLayer" self.layer.sublayers.filter {$0.name == layer.name }.first?.removeFromSuperLayer() – Pranay Chander Feb 10 '21 at 13:33

Hardik Thakkar · Answer 8 · 2021-02-16T12:14:32.737

For Swift

extension UIViewController {
    func makeGradientColor(`for` object : AnyObject , startPoint : CGPoint , endPoint : CGPoint) -> CAGradientLayer {
        let gradient: CAGradientLayer = CAGradientLayer()
        
        gradient.colors = [(UIColor.red.cgColor), (UIColor.yellow.cgColor)]
        gradient.locations = [0.0 , 1.0]
        
        gradient.startPoint = startPoint
        gradient.endPoint = endPoint
        gradient.frame = CGRect(x: 0.0, y: 0.0, width: object.bounds.size.width, height: object.bounds.size.height)
        return gradient
    }
}

How to use ?

if let layers = btn.layer.sublayers{
            for layer in layers {
                if layer.isKind(of: CAGradientLayer.self) {
                    layer.removeFromSuperlayer()
                }
            }
        }

let start : CGPoint = CGPoint(x: 0.0, y: 0.0)
let end : CGPoint = CGPoint(x: 1.0, y: 1.0)

let gradient: CAGradientLayer = self.makeGradientColor(for: cell.bgView, startPoint: start, endPoint: end)
btn.layer.insertSublayer(gradient, at: 0)

Unfortunately this is completely wrong. It's an absolute basic of iOS engineering that when you add a layer you have to shape it in `layoutSubviews` (Indeed this is literally why `layoutSubviews` exists.) — Fattie, Apr 04 '20 at 14:47
yes. The answer should be updated to remove existing gradientLayer before adding new. add the following lines before insertSublayer. layer.name = "gradientLayer" self.layer.sublayers.filter {$0.name == layer.name }.first?.removeFromSuperLayer() — Pranay Chander, Feb 10 '21 at 13:32

score 1 · Answer 9 · answered Nov 23 '18 at 17:05

There are already many answers there I want add what I did to achieve this. I use this custom Button GradientButton

import Foundation
import UIKit

class GradientButton: UIButton {

    let gradientColors : [UIColor]
    let startPoint : CGPoint
    let endPoint : CGPoint

    required init(gradientColors: [UIColor] = [UIColor.red, UIColor.blue],
                  startPoint: CGPoint = CGPoint(x: 0, y: 0.5),
                  endPoint: CGPoint = CGPoint(x: 1, y: 0.5)) {
        self.gradientColors = gradientColors
        self.startPoint = startPoint
        self.endPoint = endPoint

        super.init(frame: .zero)
    }

    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

    override func layoutSubviews() {
        super.layoutSubviews()

        let halfOfButtonHeight = layer.frame.height / 2
        contentEdgeInsets = UIEdgeInsets(top: 10, left: halfOfButtonHeight, bottom: 10, right: halfOfButtonHeight)

        layer.anchorPoint = CGPoint(x: 0.5, y: 0.5)

        backgroundColor = UIColor.clear

        // setup gradient

        let gradient = CAGradientLayer()
        gradient.frame = bounds
        gradient.colors = gradientColors.map { $0.cgColor }
        gradient.startPoint = startPoint
        gradient.endPoint = endPoint
        gradient.cornerRadius = 4

        // replace gradient as needed
        if let oldGradient = layer.sublayers?[0] as? CAGradientLayer {
            layer.replaceSublayer(oldGradient, with: gradient)
        } else {
            layer.insertSublayer(gradient, below: nil)
        }

        // setup shadow

        layer.shadowColor = UIColor.darkGray.cgColor
        layer.shadowPath = UIBezierPath(roundedRect: bounds, cornerRadius: halfOfButtonHeight).cgPath
        layer.shadowOffset = CGSize(width: 0.0, height: 1.0)
        layer.shadowOpacity = 0.85
        layer.shadowRadius = 4.0
    }

    override var isHighlighted: Bool {
        didSet {
            let newOpacity : Float = isHighlighted ? 0.6 : 0.85
            let newRadius : CGFloat = isHighlighted ? 6.0 : 4.0

            let shadowOpacityAnimation = CABasicAnimation()
            shadowOpacityAnimation.keyPath = "shadowOpacity"
            shadowOpacityAnimation.fromValue = layer.shadowOpacity
            shadowOpacityAnimation.toValue = newOpacity
            shadowOpacityAnimation.duration = 0.1

            let shadowRadiusAnimation = CABasicAnimation()
            shadowRadiusAnimation.keyPath = "shadowRadius"
            shadowRadiusAnimation.fromValue = layer.shadowRadius
            shadowRadiusAnimation.toValue = newRadius
            shadowRadiusAnimation.duration = 0.1

            layer.add(shadowOpacityAnimation, forKey: "shadowOpacity")
            layer.add(shadowRadiusAnimation, forKey: "shadowRadius")

            layer.shadowOpacity = newOpacity
            layer.shadowRadius = newRadius

            let xScale : CGFloat = isHighlighted ? 1.025 : 1.0
            let yScale : CGFloat = isHighlighted ? 1.05 : 1.0
            UIView.animate(withDuration: 0.1) {
                let transformation = CGAffineTransform(scaleX: xScale, y: yScale)
                self.transform = transformation
            }
        }
    }
}

You can make GradientButton instance like this.

let button = GradientButton.init(gradientColors:[UIColor.black, UIColor.white], startPoint: CGPoint(x: 0, y: 0), endPoint: CGPoint(x: 0, y: 1))

Unfortunately this is completely wrong, you certainly never make a layer every single time the app is laid-out. — Fattie, Apr 04 '20 at 14:48
yes. The answer should be updated to remove existing gradientLayer before adding new. add the following lines before insertSublayer. layer.name = "gradientLayer" self.layer.sublayers.filter {$0.name == layer.name }.first?.removeFromSuperLayer() — Pranay Chander, Feb 10 '21 at 13:33

score 1 · Answer 10 · answered Jul 15 '21 at 12:06

I've modified this great answer to improve the reusability of the button by adding init parameters for colors, radius, and gradient direction.

I also added updateGradientColors method as it might be useful if you want to change the gradient color at some point.

class GradientButton: UIButton {

    private let colors: [UIColor]
    private let cornerRadius: CGFloat
    private let startPoint: CGPoint
    private let endPoint: CGPoint

    required init?(coder: NSCoder) { fatalError("init(coder:) has not been implemented") }

    init(colors: [UIColor],
         cornerRadius: CGFloat = 10,
         startPoint: CGPoint = CGPoint(x: 0, y: 0.5),
         endPoint: CGPoint = CGPoint(x: 1, y: 0.5)) {
        self.colors = colors
        self.cornerRadius = cornerRadius
        self.startPoint = startPoint
        self.endPoint = endPoint
        super.init(frame: .zero)
    }

    override func layoutSubviews() {
        super.layoutSubviews()
        gradientLayer.frame = bounds
    }

    private lazy var gradientLayer: CAGradientLayer = {
        let gl = CAGradientLayer()
        gl.frame = self.bounds
        gl.colors = colors.map { $0.cgColor }
        gl.startPoint = startPoint
        gl.endPoint = endPoint
        gl.cornerRadius = cornerRadius
        layer.insertSublayer(gl, at: 0)
        return gl
    }()

    func updateGradientColors(_ colors: [UIColor]) {
        gradientLayer.colors = colors.map { $0.cgColor }
    }
}

Akash Neeli · Answer 11 · 2022-08-30T12:08:08.320

Gradient Button with corner radius, start and End Points Code is here...

extension UIView {

func applyGradient(colours: [UIColor], cornerRadius: CGFloat?, startPoint: CGPoint, endPoint: CGPoint)  {
    let gradient: CAGradientLayer = CAGradientLayer()
    gradient.frame = self.bounds
    if let cornerRadius = cornerRadius {
        gradient.cornerRadius = cornerRadius
    }
    gradient.startPoint = startPoint
    gradient.endPoint = endPoint
    gradient.colors = colours.map { $0.cgColor }
    self.layer.insertSublayer(gradient, at: 0)
  }  
}

Usage :

self.yourButton.applyGradient(colours: [.red, .green], cornerRadius: 20, startPoint: CGPoint(x: 0, y: 0.5), endPoint: CGPoint(x: 1, y: 0.5))

score 0 · Answer 12 · answered Feb 18 '19 at 07:38

   class ButtonGradient : UIButton {
        override func layoutSubviews() {

            let layer : CAGradientLayer = CAGradientLayer()
            layer.frame.size = self.frame.size
            layer.frame.origin = CGPoint(x: 0, y: 0)

            //   layer.cornerRadius = CGFloat(frame.width / 20)
            let color0 = UIColor(red:255/255, green:122/255, blue:0/255, alpha:1.0).cgColor
            let color1 = UIColor(red:255/255, green:176/255, blue: 0/255, alpha:1.0).cgColor
            let color2 = UIColor(red:250/255, green:98/255, blue: 44/255, alpha:1.0).cgColor
            layer.locations = [0.5, 1.0]
            layer.startPoint = CGPoint(x: 0.0, y: 0.5)
            layer.endPoint = CGPoint(x: 0.5, y: 0.5)
            layer.colors = [color2,color0,color1]

            self.layer.insertSublayer(layer, at: 0)
        }
    }

After that directly assign "ButtonGredient" class to particular button in Storyboard.

This is **incredibly wrong**. You're making 100s and thousands of gradient layers - a new one every time the app is laid out! — Fattie, Mar 10 '20 at 16:11
yes. The answer should be updated to remove existing gradientLayer before adding new. add the following lines before insertSublayer. layer.name = "gradientLayer" self.layer.sublayers.filter {$0.name == layer.name }.first?.removeFromSuperLayer() — Pranay Chander, Feb 10 '21 at 13:31

score 0 · Answer 13 · answered May 03 '19 at 09:21

Here, I have taken one UIView and add button in it.

     @IBOutlet weak var btnCenter: UIButton!
     @IBOutlet weak var viewCenter: UIView!

    // Create a gradient layer
    let gradient = CAGradientLayer()

    // gradient colors in order which they will visually appear
    gradient.colors = [UIColor.yello.cgColor, UIColor.blue.cgColor]

    // Gradient from left to right
    gradient.startPoint = CGPoint(x: 0.0, y: 0.5)
    gradient.endPoint = CGPoint(x: 1.0, y: 0.5)

    // set the gradient layer to the same size as the view
    gradient.frame = viewCenter.bounds

    // add the gradient layer to the views layer for rendering
    viewCenter.layer.insertSublayer(gradient, at: 0)

    // Tha magic! Set the button as the views mask
    viewCenter.mask = btnCenter

    //Set corner Radius and border Width of button
    btnCenter.layer.cornerRadius =  btnCenter.frame.size.height / 2
    btnCenter.layer.borderWidth = 5.0

Unfortunately this is completely wrong. It's an absolute basic of iOS engineering that when you add a layer you have to shape it in `layoutSubviews` (Indeed this is literally why `layoutSubviews` exists.) — Fattie, Apr 04 '20 at 14:49
yes. The answer should be updated to remove existing gradientLayer before adding new. add the following lines before insertSublayer. layer.name = "gradientLayer" self.layer.sublayers.filter {$0.name == layer.name }.first?.removeFromSuperLayer() — Pranay Chander, Feb 10 '21 at 13:32

score 0 · Answer 14 · answered Jul 17 '21 at 17:58

There are ways to work with initial layer without making sublayers.

import UIKit
@IBDesignable class GradientButton: UIButton {
    @IBInspectable var startColor: UIColor = UIColor.white
    @IBInspectable var endColor: UIColor = UIColor.white
    @IBInspectable var cornerRadius = CGFloat(5.0)

    override class var layerClass: AnyClass {
        return CAGradientLayer.self
    }

    override func layoutSubviews() {
        super.layoutSubviews()
        //This is an advanced gradient we do not use for now
//        (layer as! CAGradientLayer).startPoint = CGPoint(x: 0, y: 0)
//        (layer as! CAGradientLayer).endPoint = CGPoint(x: 1, y: 1)
//        (layer as! CAGradientLayer).locations = [0,1]

        // Simple gradient
        (layer as! CAGradientLayer).colors = [startColor.cgColor, endColor.cgColor]
        layer.cornerRadius = cornerRadius
    } 
}

score 0 · Answer 15 · answered Aug 08 '22 at 08:51

class GradientButton: UIButton {

    var gradientLayer: CAGradientLayer? {
        didSet {
            layer.sublayers?.filter { $0 is CAGradientLayer }.forEach { $0.removeFromSuperlayer() }

            if let gradientLayer = gradientLayer {
                layer.insertSublayer(gradientLayer, at: 0)
            }
        }
    }

    override func layoutSubviews() {
        super.layoutSubviews()
        gradientLayer?.frame = self.bounds
    }
}

Set Background Gradient on Button in Swift

15 Answers15

Linked