iOS White to Transparent Gradient Layer is Gray
Solution 1
clearColor has a black color channel with an alpha of 0, so I had to use
[UIColor colorWithWhite:1 alpha:0]
and it works fine.
Solution 2
In Swift This worked for me,
UIColor.white.withAlphaComponent(0).cgColor
Solution 3
Worth pointing out that any other colour will work like this... using a combination of the two answers above....
Objective C
UIColor *colour = [UIColor redColor];
NSArray *colourArray = @[(id)[colour colorWithAlphaComponent:0.0f].CGColor,(id)colour.CGColor]
NSArray *locations = @[@0.2,@0.8];
CAGradientLayer *gradientLayer = [CAGradientLayer layer];
gradientLayer.colors = colourArray;
gradientLayer.locations = locations;
gradientLayer.frame = self.frame;
[self.layer addSublayer:gradientLayer];
Swift 3
let colour:UIColor = .red
let colours:[CGColor] = [colour.withAlphaComponent(0.0).cgColor,colour.cgColor]
let locations:[NSNumber] = [0.2,0.8]
let gradientLayer = CAGradientLayer()
gradientLayer.colors = colours
gradientLayer.locations = locations
gradientLayer.frame = frame
layer.addSublayer(gradientLayer)
Solution 4
Swift 3 Syntax,
UIColor(white: 1, alpha: 0).cgColor
Solution 5
The answers above such as:
UIColor.white.withAlphaComponent(0).cgColor
and
UIColor(white: 1.0, alpha: 0.0).cgColor
should work in terms of getting a portion of your gradient to be clear (rather than the gray that OP is referring to). However, if you're still seeing a transparent white when you should be seeing a clear color, make sure the backgroundColor
of the view to which you're applying the gradient is clear as well.
By default, that view's background color will likely be white (or a dark color if the device is in dark mode), so when you apply the gradient, the clear portion of it will be "blocked" by the view's backgroundColor
itself. Set that to clear and you should be good to go.
Eric Gao
Updated on July 08, 2022Comments
-
Eric Gao almost 2 years
I have a CAGradientLayer inserted to the bottom of this small detail view that pops up at the bottom of the app. As you can see, I've set the colors from white to clear, but there's this strange gray tint that is showing up. Any ideas?
// Set up detail view frame and gradient [self.detailView setFrame:CGRectMake(0, 568, 320, 55)]; CAGradientLayer *layer = [CAGradientLayer layer]; layer.frame = self.detailView.bounds; layer.colors = [NSArray arrayWithObjects:(id)[UIColor whiteColor].CGColor, (id)[UIColor clearColor].CGColor, nil]; layer.startPoint = CGPointMake(1.0f, 0.7f); layer.endPoint = CGPointMake(1.0f, 0.0f); [self.detailView.layer insertSublayer:layer atIndex:0];
Here is the problematic view:
-
RealNmae about 7 yearsIt replaces black shadow with white shadow. Still not transparent
-
Fattie about 6 yearsImportant - for 2018, consider this approach: stackoverflow.com/a/25408833/294884
-
Conor almost 6 years@RealNmae If you want to go from a colour to clear use UIColor.startColor and UIColor.startColor.withAlphaComponent(0.0) as your two colors.
-
SomaMan almost 6 years@Conor This is actually the correct answer - thanks, works perfectly regardless of colour
-
SnoopyProtocol over 5 yearsDon't forget to add the .cgColor as shown in the answer!!! I accidentally used UIColor.white.withAlphaComponent(0) and was scratching my head for an hour wondering why it was still gray.