Set CALayer Gradient Background

Question

I am trying to add a gradient to a CALayer I have created. I can set the background colour of the CALayer with the following:

self.colorLayer = [CALayer layer];
[self.colorLayer setBackgroundColor:color.CGColor]; 
[self.colorView setWantsLayer:YES]; 
[self.colorView setLayer:self.colorLayer];

I've looked around with no success (surprisingly I thought this would have been answered many times).

I have made a gradient with:

NSGradient *gradient = 
    [[NSGradient alloc] initWithStartingColor:[NSColor orangeColor] 
        endingColor:[NSColor lightGrayColor]];

But can't add it to my CALayer or add an angle.

score 3 · Accepted Answer · answered Jun 17 '15 at 20:12

3

    CAGradientLayer *gradient = [CAGradientLayer layer];
    gradient.colors = [NSArray arrayWithObjects:(id)[[NSColor whiteColor] CGColor], (id)[[NSColor greenColor] CGColor], nil];
    gradient.frame = self.colorView.bounds;
    [self.colorView setLayer:gradient];
    [self.colorView setWantsLayer:YES];

answered Jun 17 '15 at 20:12

burrGGG

617
2
9
18

just thought i'd put the code in once it worked, i wasn't sure what to do with 'Assign a CAGradientLayer to its layer property?' – burrGGG Jun 17 '15 at 20:31

score 1 · Answer 2 · answered Jun 16 '15 at 19:49

1

You don't need to add a gradient to a CALayer, because you can use a CAGradientLayer instead.

answered Jun 16 '15 at 19:49

matt

515,959
87
875
1,141

ok, so i have a new viewController with xib file which i initialise with self.gradientView = [[GradView alloc] initWithNibName:@"GradView" bundle:nil]; [self.view addSubview:self.gradientView.view]; self.gradientView.view.frame = ((NSView*)self.view).bounds; – burrGGG Jun 16 '15 at 19:54
how could i add the background colour of this view to be a gradient? – burrGGG Jun 16 '15 at 19:55
2

Assign a CAGradientLayer to its `layer` property? – matt Jun 16 '15 at 20:05
CAGradientLayer *gradient = [CAGradientLayer layer]; gradient.colors = [NSArray arrayWithObjects:(id)[[NSColor whiteColor] CGColor], (id)[[NSColor greenColor] CGColor], nil]; [self.gradientView.view.layer addSublayer:gradient];???? – burrGGG Jun 16 '15 at 20:22
Your last line should be `self.gradientView.layer = gradient;` since, as @matt said, you can set the view's layer (its root layer can simply be replaced - no need to add your gradient layer as a sublayer). – Joshua Nozzi Jun 17 '15 at 13:52
this doesn't work. How can I just set the background of NSViewController to a gradient? Really difficult to find anything on this, has no one ever done it? – burrGGG Jun 17 '15 at 19:53
I just want to set either a customView, or NSViewController xib background colour to a gradient. I'm looking for anyway to set a gradient to any kind of view – burrGGG Jun 17 '15 at 20:03
Try with the NSView, i have created a NSView in storyboard, linked it up. I can then easily set the background colour of this view using self.colorLayer = [CALayer layer]; [self.colorLayer setBackgroundColor:[NSColor greenColor].CGColor]; [self.colorView setWantsLayer:YES]; [self.colorView setLayer:self.colorLayer]; Now instead of setting the background colour to a flat colour i want a gradient instead. I've tried various ways to add a CAGradientLayer to my colorView (colourView and colorLayer are different) – burrGGG Jun 17 '15 at 20:06
basically how can i get a gradient on anything? But try NSView as nothing seems to work – burrGGG Jun 17 '15 at 20:08
CAGradientLayer *gradient = [CAGradientLayer layer]; gradient.colors = [NSArray arrayWithObjects:(id)[[NSColor whiteColor] CGColor], (id)[[NSColor greenColor] CGColor], nil]; gradient.frame = self.colorView.bounds; [self.colorView setLayer:gradient]; this doesn't work and nothing else seems to – burrGGG Jun 17 '15 at 20:08
Why? Does `CAGradientLayer` support `path`? – Bagusflyer Mar 15 '21 at 08:52

score 1 · Answer 3 · answered Jan 23 '18 at 14:15

Swift 4 version of this answer

    let gradient = CAGradientLayer()
    gradient.colors = [NSColor.hlpMarineBlue, NSColor.hlpDarkishBlue, NSColor.hlpOceanBlue]
    gradient.frame = self.backgroundView.bounds;
    self.colorView.layer = gradient
    self.colorView.wantsLayer = true

score 0 · Answer 4 · answered Dec 21 '22 at 05:43

//To Use:

guard let firstColot: NSColor = NSColor(hexString: HexColorCode.code.leftMenuFirstColor.rawValue) else {return}
guard let secondColor: NSColor = NSColor(hexString: HexColorCode.code.leftMenuSecondColor.rawValue) else {return}
    
leftMenuBgView.gradient(fillView: leftMenuBgView,
                            withGradientFromColors: [firstColot, secondColor])



extension NSView {

func gradient(fillView view: NSView, withGradientFromColors colors: Array<NSColor>) {
    self.wantsLayer = true
    let gradientLayer = CAGradientLayer()
    gradientLayer.frame = view.bounds
    let color1 = colors[0].cgColor
    let color2 = colors[1].cgColor
    gradientLayer.colors = [color1, color2]
    gradientLayer.locations = [0.0, 1.0]
    self.layer?.insertSublayer(gradientLayer, at: 0)
  }
}

Set CALayer Gradient Background

4 Answers4

Linked