How to make a UIView have an effect of transparent gradient?

Question

I want to make a UIView have an effect of transparent gradient from the middle to the left and right. Like in this example:

enter image description here

The word 籍 has the desired effect. This view is achieved by the class MarqueeLabel. I examined the source code, it is likely implemented by class CALayer.

You just use **opacity**. Annoyingly it's named **alpha** for views but **opacity** for CALayer. — Fattie, Aug 19 '19 at 14:02

R. Mohan · Answer 1 · 2020-05-04T03:56:01.680

23

In Swift 4: for top to bottom transparent gradient.

let gradient = CAGradientLayer()
gradient.startPoint = CGPoint(x: 0.5, y: 0.0)
gradient.endPoint = CGPoint(x: 0.5, y: 0.6)
let whiteColor = UIColor.white
gradient.colors = [whiteColor.withAlphaComponent(0.0).cgColor, whiteColor.withAlphaComponent(1.0).cgColor, whiteColor.withAlphaComponent(1.0).cgColor]
gradient.locations = [NSNumber(value: 0.0),NSNumber(value: 0.2),NSNumber(value: 1.0)]
gradient.frame = gradientView.bounds
gradientView.layer.mask = gradient

edited May 04 '20 at 03:56

answered May 13 '18 at 16:42

R. Mohan

2,182
17
30

Just perfect! Thank you. – fahrulazmi May 15 '18 at 14:22

score 19 · Answer 2 · answered Apr 08 '16 at 02:24

Screenshot

Swift code

let mask = CAGradientLayer()
mask.startPoint = CGPointMake(0.0, 0.5)
mask.endPoint = CGPointMake(1.0, 0.5)
let whiteColor = UIColor.whiteColor()
mask.colors = [whiteColor.colorWithAlphaComponent(0.0).CGColor,whiteColor.colorWithAlphaComponent(1.0),whiteColor.colorWithAlphaComponent(1.0).CGColor]
mask.locations = [NSNumber(double: 0.0),NSNumber(double: 0.2),NSNumber(double: 1.0)]
mask.frame = label.bounds
label.layer.mask = mask

Kyokook Hwang · Accepted Answer · 2016-04-08T02:19:41.797

15

You can use CAGradientLayer as following.

gradientLayer = [CAGradientLayer layer];
gradientLayer.frame = baseView.bounds;
gradientLayer.startPoint = CGPointMake(0.5,0.0);
gradientLayer.endPoint = CGPointMake(0.5,1.0);
gradientLayer.locations = @[@(0.0), @(0.2), @(1.0)];
gradientLayer.colors = @[(id)[UIColor colorWithWhite:1.0 alpha:0.9].CGColor,
                         (id)[UIColor colorWithWhite:1.0 alpha:0.3].CGColor,
                         (id)[UIColor colorWithWhite:1.0 alpha:0.0].CGColor];
[baseView.layer addSublayer:gradientLayer];

CAGradientLayer supports several properties to make natural gradient, such as setting gradient direction by startPoint and endPoint, changing color curve by locations and colors.

You also make a transparent effect by using alpha channel of color.

edited Apr 08 '16 at 02:19

answered Apr 08 '16 at 02:12

Kyokook Hwang

2,682
21
36

2

The question was flagged objective-c, not swift. – catalandres Apr 08 '16 at 02:38
1

@catalandres okay. i see. Leo already suggests a swift version. so i might not edit my answer. :-) If there is anyone who needs objective-c version, it will be help. – Kyokook Hwang Apr 08 '16 at 02:44
1

Thx for your answer. I rewrite code with swift by your thought, and succeed. :-) Thx, again. – Desgard_Duan Apr 08 '16 at 05:05
2

I had to change the last line to `self.submitButtonBackground.layer.mask = gradientLayer;` to make it work in iOS 11 – Jonathan Cabrera Sep 04 '18 at 20:08

score 8 · Answer 4 · answered Mar 17 '17 at 20:43

Swift 3:

let mask = CAGradientLayer()
mask.startPoint = CGPoint(x: 0, y: 0.5)
mask.endPoint = CGPoint(x:1.0, y:0.5)
let whiteColor = UIColor.white
mask.colors = [whiteColor.withAlphaComponent(0.0).cgColor,whiteColor.withAlphaComponent(1.0),whiteColor.withAlphaComponent(1.0).cgColor]
mask.locations = [NSNumber(value: 0.0),NSNumber(value: 0.2),NSNumber(value: 1.0)]
mask.frame = view.bounds
view.layer.mask = mask

score 4 · Answer 5 · answered Feb 26 '20 at 02:26

Use clear color instead of set the alpha value.

let gradientLayer = CAGradientLayer()
gradientLayer.startPoint = CGPoint(x: 0, y: 0.5)
gradientLayer.endPoint = CGPoint(x: 1, y: 0.5)
gradientLayer.colors = [UIColor.clear.cgColor, UIColor.white.cgColor, UIColor.white.cgColor]
gradientLayer.locations = [0, 0.2, 1]
gradientLayer.frame = gradientView.bounds
gradientView.layer.mask = gradientLayer

How to make a UIView have an effect of transparent gradient?

5 Answers5