Swift gradient from black to fully transparent

Question

I am trying to apply a CAGradientLayer using swift, and I would like it to fade from black to transparent.

I thought putting any color with an alpha: 0 would render the same "transparent" color. It is not the case. White with alpha: 0 is still a bit white, red with alpha: 0 is still a bit red...

I don't want any tint, just transparent. The black being less black to the point theres no color and you can fully see the view under it for example.

gradientLayer.colors = [UIColor(hex: 0x000000, alpha: 0.4).cgColor,
                        UIColor(hex: 0x6D6D6D, alpha: 0.3).cgColor,
                        UIColor.white.withAlphaComponent(0.0).cgColor]
gradientLayer.locations = [0.0, 0.3, 1.0]

If I apply the layer over a gray picture, it's easy to see that its not transparent but white:

EDIT 1:

gradientLayer.frame = self.gradientView.bounds
gradientLayer.masksToBounds = true
gradientLayer.colors = [UIColor.black.withAlphaComponent(1.0).cgColor, UIColor.black.withAlphaComponent(0.0).cgColor]
gradientLayer.locations = [0.0, 1.0]
gradientLayer.startPoint = CGPoint(x: 0.0, y: 0.0)
gradientLayer.endPoint = CGPoint(x: 0.0, y: 1.0)
self.gradientView.layer.addSublayer(gradientLayer)

Output :

Have you tried using UIColor.clear.cgColor instead of UIColor.white.withAlphaComponent(0.0).cgColor? — Jake G, May 01 '18 at 00:32
@JakeG yes I did, and instead of a white tint its a black tint... — Scaraux, May 01 '18 at 00:38
That's because `UIColor.clear` is actually a black color with an alpha value of 0. What worked for me when trying to fade from white to clear, was to fade from `(r: 255, g: 255, b: 255, a: 1)` to `(r: 255, g: 255, b: 255, a: 0.01)` (so still white but w/ a teeny tiny alpha value above 0. Same might work for black doing `(r: 0, g: 0, b: 0, a: 1)` to `(r: 0, g: 0, b: 0, a: 0.01)` — LinusGeffarth, May 01 '18 at 19:46
There are options for how the ending is drawn. If neither work, try making your own custom CGShading function, as per the Apple Guide. I usually have to tell it to "not draw last line" with kCGGradientDrawsBeforeStartLocation in the draw func — Stephen J, May 01 '18 at 19:47
@LinusGeffarth, trying that right now. stephen, do you have any example ? — Scaraux, May 01 '18 at 19:48

Chanchal Chauhan · Accepted Answer · 2021-01-18T09:51:19.910

11

You can try this:

    gradientLayer.colors = [UIColor.black.withAlphaComponent(1.0).cgColor,
                            UIColor.black.withAlphaComponent(0.0).cgColor]
    //gradientLayer.locations = [0.0, 1.0]
    gradientLayer.frame = myView.bound
    gradientLayer.startPoint = CGPoint(x: 1.0, y: 0.0)
    gradientLayer.endPoint = CGPoint(x: 1.0, y: 1.0)
    myView.layer.insertSublayer(gradientLayer, at: 0)

It worked in my case.

edited Jan 18 '21 at 09:51

answered May 01 '18 at 09:15

Chanchal Chauhan

1,530
13
25

2

Its very weird. I tried this and the black is still visible and the end. Instead of smoothly going to transparent, it stops line a "line". – Scaraux May 01 '18 at 19:36
I have edited my ans. Try adding `startPoint` and `endPoint`. – Chanchal Chauhan May 02 '18 at 05:37
gradientLayer.frame = myView.frame insteed of this you need to set the myView.bound to work – Iraniya Naynesh Jan 15 '21 at 09:03

Swift gradient from black to fully transparent

1 Answers1