CAGradientLayer not smooth enough?

Question

I'm doing a CAGradientLayer for every background of my UIViews, but I have a small problem. The gradient doesn't seem that smooth enough. The transition between the colors are to present. You can see it in this picture.

Wrong gradient screenshot

This is how I implemented this gradient in the initializer of my UIView.

CAGradientLayer *layer = [CAGradientLayer layer];
layer.colors = [NSArray arrayWithObjects:
                (id)[[UIColor darkKinepolisColor] CGColor],
                (id)[[UIColor lightKinepolisColor] CGColor],
                (id)[[UIColor lightKinepolisColor] CGColor],
                (id)[[UIColor darkKinepolisColor] CGColor],
                nil];
layer.locations = [NSArray arrayWithObjects:
                   [NSNumber numberWithFloat:0],
                   [NSNumber numberWithFloat:0.4],
                   [NSNumber numberWithFloat:0.6],
                   [NSNumber numberWithFloat:1],
                   nil];
layer.startPoint = CGPointMake(0, 0);
layer.frame = self.layer.bounds;
layer.endPoint = CGPointMake(1, 1);
layer.contentsGravity = kCAGravityResize;
[self.layer addSublayer:layer];

Could you, fine developers, help me with this problem? Thanks!

I find that gradients often look much smoother on the device than the simulator. — codeperson, Feb 06 '13 at 00:42

score 5 · Answer 1 · edited May 23 '17 at 10:30

5

From what I've seen CAGradientLayer does not support dithering, but CGGradient does. See my answer here. Also see the other answers for example on using CGGradient.

edited May 23 '17 at 10:30

Community

1
1

answered Feb 19 '12 at 10:07

ThomasW

16,981
4
79
106

score 2 · Answer 2 · answered Sep 26 '11 at 13:18

Isn't this just a consequence of 8-bit colour values? The steps between the colours are as small as they can possibly be.

i.e. if you want a gradient between rgb(100,100,100) and rgb(109,109,109) it can only be perfectly smooth across a gradient width of 10 pixels. If you tried to draw this gradient across a width of 100 pixels you would get 10 blocks of colour 10px wide and it would look very blocky. What else could happen?

You can make it appear smoother by dithering and adding noise but there is no built in function for this.

So, either, choose colours farther apart, draw the gradient over a shorter distance or make the graphic in Photoshop and apply noise and dithering to make it appear smoother.

score 1 · Answer 3 · answered Jun 16 '13 at 05:07

I'm developing an app that needs a base gradient, and various other gradients are faded into it, depending on various factors (eg: the time of day). I've found that I can continue to use CAGradientLayer for all but the base gradient. For the base gradient, i created it in photoshop and added 0.554% noise. Almost imperceptible, but it prevents the banding effect when I animate the alpha of CAGradientLayers above it.

So I guess the answer would be that you need dithering/noise on at least one of the gradients to avoid the banding effect. It may also be possible to add this programmatically, or by loading a pre-rendered black image with noise over a CAGradientLayer with a low alpha (~0.1f) on the noise layer.

score 0 · Answer 4 · answered May 23 '13 at 18:07

0

Rasterize with your device's screen scale, will be very smooth and crisp!

[layer setShouldRasterize:YES];
[layer setRasterizationScale:[UIScreen mainScreen].scale];

answered May 23 '13 at 18:07

emotality

12,795
4
39
60

1

I've tested this, it doesn't cause the gradients to dither and hence the banding remains. – Dermot Jun 16 '13 at 03:37

CAGradientLayer not smooth enough?

4 Answers4

Linked