iOS gradient effect over UILabel

Question

I want to add gradient effect on a UILabel so it look like:

---

Please note the gradient effect on left and right corner.I've no clue how to do that.any help or suggestion would be appreciated.

Edit: - I tried with this code-

UIColor *endColor = [UIColor colorWithRed:20/255.0 green:157/255.0 blue:189/255.0 alpha:1.0];
NSArray *gradientColors = [NSArray arrayWithObjects:(id)[[UIColor clearColor] CGColor],(id)[endColor CGColor], nil];
CAGradientLayer *gradientLayer = [CAGradientLayer layer];
gradientLayer.colors = gradientColors;
[gradientLayer setStartPoint:CGPointMake(0.0, 0.5)];
[gradientLayer setEndPoint:CGPointMake(1.0, 0.5)];
[self.rightLabel.layer insertSublayer: gradientLayer atIndex:0];

But i'm getting like:

Note:

Gradient is added as background of Label but i want gradient effect as in 1st image (see label in right corner)

Answer 1

You code is correct but you miss setting the frame that will be occupied by the CAGradientLayer..

And take note that you need to use color with alpha value, to avoid occurrence of black color.. ex:

[UIColor colorWithRed:0 green:0.5 blue:1 alpha:0]

or

[[UIColor YourColor] colorWithAlphaComponent:0] instead of [UIColor clearColor]

And check this sample code, i've already tried this and works for me, hope this will work for you too.. Happy Coding.. :)

CAGradientLayer *rightGradient = [CAGradientLayer layer];
rightGradient.frame = CGRectMake(0, 0, YourLabel.frame.size.width, YourLabel.size.height);
rightGradient.colors = [NSArray arrayWithObjects:(id)[UIColor colorWithRed:0 green:0.5 blue:1 alpha:0].CGColor, (id)[UIColor colorWithRed:0 green:0.5 blue:1 alpha:1].CGColor, nil];
[rightGradient setStartPoint:CGPointMake(0.8, 0.9)];
[rightGradient setEndPoint:CGPointMake(1.0, 0.9)];
[YourLabel.layer addSublayer:rightGradient];

Oh last thing, if you plan to add a gradient to the left just change

[rightGradient setStartPoint:CGPointMake(0.8, 0.9)];
[rightGradient setEndPoint:CGPointMake(1.0, 0.9)];

to

[leftGradient setStartPoint:CGPointMake(0.2, 0.1)];
[leftGradient setEndPoint:CGPointMake(0.0, 0.1)];

Here the sample output:

---

Update as requested

line 1: Simply allocation

CAGradientLayer *rightGradient = [CAGradientLayer layer];

line 2: CAGradientLayers frame

rightGradient.frame = CGRectMake(0, 0, YourLabel.frame.size.width, YourLabel.size.height);

This is very important, this sets the frame (same with UIView, etc) CAGradientLayer, meaning origin.x and origin.y is also considered..

line 3: .colors

rightGradient.colors = [NSArray arrayWithObjects:(id)[UIColor colorWithRed:0 green:0.5 blue:1 alpha:0].CGColor, (id)[UIColor colorWithRed:0 green:0.5 blue:1 alpha:1].CGColor, nil];

When you assign array of color like whats in my example, color are arrange accordingly.. (color.alpha == 0) is in index 0 and (color.alpha == 1) is in index 1, and will be displayed left to right..

line 4: setStartPoint

[rightGradient setStartPoint:CGPointMake(0.8, 0.9)];

The start point corresponds to the first stop of the gradient. The point is defined in the unit coordinate space and is then mapped to the layer’s bounds rectangle when drawn.

Default value is (0.5,0.0).

line 5: setEndPoint

[rightGradient setEndPoint:CGPointMake(1.0, 0.9)];

The end point corresponds to the last stop of the gradient. The point is defined in the unit coordinate space and is then mapped to the layer’s bounds rectangle when drawn.

Default value is (0.5,1.0).

[YourLabel.layer addSublayer:rightGradient];

And it was all discussed here.. CAGradientLayer

About the color that you are asking you can use this: UIColor Code Generator

But if you want to use hex string for color like #ace123 you can use this method:

+ (UIColor *)colorWithHexString:(NSString *)hexString withOpacity:(CGFloat)opacity
{
    unsigned rgbValue = 0;

    NSScanner *scanner;

    scanner = [NSScanner scannerWithString:hexString];

    scanner.scanLocation = ([hexString hasPrefix:@"#"]) ? 1 : 0;

    [scanner scanHexInt:&rgbValue];

    UIColor *color = [UIColor colorWithRed:((rgbValue & 0xFF0000) >> 16)/255.0 green:((rgbValue & 0xFF00) >> 8)/255.0 blue:(rgbValue & 0xFF)/255.0 alpha:opacity];

    return color;
}

^_^ Cheers!

Answer 2

You can take help of following demo. which is providing all effect on UILabel.

FXLabel

Output:

Here i am providing link because due to time complexity.

May this help you.

Answer 3

Edited:

UIView * gradientView = [[UIView alloc] initWithFrame:label.frame];
    [self.view addSubview:gradientView];
    [self.view sendSubviewToBack:gradientView];
    label.backgroundColor = [UIColor clearColor];

    label.textColor = [UIColor redColor];

    CAGradientLayer * gradientLayernavigationBar = [[CAGradientLayer alloc] init];

    gradientLayernavigationBar.frame = label.bounds;
    gradientLayernavigationBar.colors = [NSArray arrayWithObjects:(id)[[UIColor blackColor] CGColor], (id)[[UIColor redColor  ] CGColor], nil];

    gradientLayernavigationBar.startPoint =CGPointMake(0, 1);
    gradientLayernavigationBar.endPoint = CGPointMake(1, 1);
    gradientLayernavigationBar.opacity=1.0;
    [gradientView.layer insertSublayer:gradientLayernavigationBar atIndex:1];

Answer 4

You can add mask layer with mask image, it's should help:

CALayer *maskLayer = [CALayer layer];

maskLayer.backgroundColor = [UIColor colorWithRed:0.f green:0.f blue:0.f alpha:0.5f].CGColor;
maskLayer.contents = (id)[[UIImage imageNamed:@"maskImage.png"] CGImage];

maskLayer.contentsGravity = kCAGravityCenter;
maskLayer.frame = YourLabel.bounds;
YourLabel.layer.mask = maskLayer;

example mask image:

Answer 5

The problem is that you are assuming UIColor.clearColor works just fine. But it does not. It is a transparent black, which is different from a transparent white, or a transparent version of your blue. Along the gradient, your blue fades into black and loses opacity. You only want it to lose opacity. Hence you should use [endColor colorWithAlphaComponent:0.0] instead of UIColor.clearColor.

Also, this approach is bad when you don't have a solid background color. Consider not adding a gradient sublayer, but instead mask your view using a black to transparent gradient.

Answer 6

You can use the help of library DrawingLabel without any CoreGraphics code:

DrawingGradient *gradient = [DrawingGradient new];
gradient.colorArray = @[[UIColor greenColor],[UIColor yellowColor],[UIColor cyanColor]];
gradient.locations  = @[@0,@0.3,@0.8];
gradient.gradientType = DrawingGradientTypeVertical;