CAGradientLayer radial gradient

Question

I used the following code to set gradient color:

NSArray *locations = @[@0.0, @0.1f];

CAGradientLayer *headerLayer = [CAGradientLayer layer];
headerLayer.colors = colors;
headerLayer.locations = locations;

How can I make radial gradient color?

I think I have to change locations, but I didn't guess the correct locations. Also, I tried this:

headerLayer.anchorPoint = CGPointMake(0.5, 1.0);

But it doesn't work.

Thanks.

Stéphane de Luca · Answer 1 · 2019-07-20T21:52:29.407

17

By 2019, the accepted answer is erroneous and you can make a radial gradient by setting its type property to .radial. On thing important is that the startPoint is the coordinate of the center of the ellipse or circle and the endPoint are the dimensions of the outer eclipse or circle. All coordinates have to be expressed in unit-based (aka 1.0 is 100%).

The following Swift example will draw an ellipse positioned at the center of the frame and the radiuses set to match the frame:

    let g = CAGradientLayer()

    // We want a radial gradient
    g.type = .radial

    g.colors = [UIColor.clear.cgColor, UIColor.black.cgColor]

    let center = CGPoint(x: 0.5, y: 0.5)        
    g.startPoint = center

    let radius = 1.5
    g.endPoint = CGPoint(x: radius, y: radius)

The above example can be used to add a vignette to a view for example (see the image).

Note that the radius can be larger than the frame, and the center can be placed outside the frame as well by specifying coordinates greater than 1 or lower than -1.

edited Jul 20 '19 at 21:52

answered Jul 20 '19 at 21:40

Stéphane de Luca

12,745
9
57
95

Whenever I try to do this, I get a very "striped" weird looking gradient on runtime with the simulator. When I took a snapshot test, however, on the snapshot it looked fine. :( – Charlotte1993 Sep 11 '19 at 11:59
It seems like I cannot paste my code here :( the code is too long according to stack overflow :( I'm creating a stack overflow question right now, I will paste the link here when I publish it. – Charlotte1993 Sep 11 '19 at 12:37
https://stackoverflow.com/questions/57889427/radial-cagradientlayer-not-rendering-properly-at-runtime – Charlotte1993 Sep 11 '19 at 12:41
The word "radius" is not accurate in this example. If we want the code to truly treat that as a radius, the last line needs to be replaced with: `let edgeLen = sqrt((radius*radius)/2.0); g.endPoint = CGPoint(x: center.x + edgeLen, y: center.y + edgeLen)` – TyR Jun 11 '23 at 18:35

score 1 · Answer 2 · answered Jan 21 '19 at 16:23

1

you can't init radial CAGradientLayer, BUT you can easily modify current layer style to radial

layer.type = .radial

answered Jan 21 '19 at 16:23

Anton Shevtsov

190
1
11

Mazyod · Accepted Answer · 2019-07-21T09:49:00.477

-3

Update:

Seems like it does, other answers show the method.

Unfortunately, CAGradientLayer doesn't support radial gradients. The only way to do that is to subclass CALayer and do the drawing yourself.

I have answered the question here, but since this is an older question, the other one might be a duplicate.

edited Jul 21 '19 at 09:49

answered Nov 14 '14 at 07:28

Mazyod

22,319
10
92
157

CAGradientLayer radial gradient

3 Answers3