Gradient in corner

Question

I want to create a background view that has top right corner and bottom left corner gradients How do I achieve this ?

I have this code

  CAGradientLayer *gradient = [CAGradientLayer layer];
    gradient.frame = self.bounds;
    gradient.colors = [NSArray arrayWithObjects: (id)[[UIColor whiteColor] CGColor],(id)[[UIColor blackColor] CGColor], nil];
    gradient.startPoint = CGPointZero;
    [self.layer insertSublayer:gradient atIndex:0];

but it doesnt do what i want, and I don't know how to make it do what I want.

current result: enter image description here

The desired result is:

enter image description here

And what does your code render? – Larme Sep 16 '14 at 13:30 — Larme, Sep 16 '14 at 13:30

score 5 · Answer 1 · answered Sep 16 '14 at 13:43

5

This should do the trick:

CAGradientLayer *gradient = [CAGradientLayer layer];
[gradient setFrame:[self bounds]];

//Pink color to set with your needs
UIColor *pinkColor = [UIColor colorWithRed:1 green:105/255.0 blue:180/255.0 alpha:1];
gradient.colors = @[(id)[pinkColor CGColor],
                    (id)[[UIColor whiteColor] CGColor],
                    (id)[[UIColor whiteColor] CGColor],
                    (id)[pinkColor CGColor]];

//You may have to change these values to your needs.
[gradient setLocations:@[@(0.0), @(0.2), @(0.8), @(1.0)]];

//From Upper Right to Bottom Left
[gradient setStartPoint:CGPointMake(1, 0)];
[gradient setEndPoint:CGPointMake(0, 1)];

//Apply
[[self layer] insertSublayer:gradient atIndex:0];

You have to read the documentation about CAGradientLayer.

answered Sep 16 '14 at 13:43

Larme

24,190
6
51
81

how to make the corners to look like they are part of a circle, rather than a triangle ? – Lena Bru Sep 16 '14 at 13:45
1

You drawing was a "radial gradient"! I didn't understood it. Then: http://stackoverflow.com/questions/8125623/how-do-i-add-a-radial-gradient-to-a-uiview – Larme Sep 16 '14 at 13:48
since i don't understand the meaning of this answer, this doesnt help me much, can you please explain ? – Lena Bru Sep 16 '14 at 13:57
the colors are drawn like i want, but i want them to be 1/4th of a circle in each corner – Lena Bru Sep 16 '14 at 13:57
You want them in a "circle" way, so you have to read/use/try some link inside the other question I linked. – Larme Sep 16 '14 at 13:59

score 1 · Answer 2 · answered Sep 16 '14 at 15:48

The best I could come up with was to draw two radial gradients and fill the rest. Note that this will need some adjustment if any of this should be (partially) transparent.

func + (origin:CGPoint, offset:CGSize) -> CGPoint {
    return CGPoint(x: origin.x + offset.width, y: origin.y + offset.height)
}

class GradientView : UIView {

    override func drawRect(rect: CGRect) {
        let context = UIGraphicsGetCurrentContext()
        CGContextSaveGState(context)

        let topLeft = CGPoint(x: 0, y: 0)
        let bottomRight = self.bounds.origin + self.bounds.size

        let colors = [
            UIColor.purpleColor(),
            UIColor.redColor(),
            UIColor.redColor()
            ].map { $0.CGColor as AnyObject! }
        let points : [CGFloat] = [0.0, 0.75, 1.0]
        let gradient = CGGradientCreateWithColors(nil, colors, points)

        CGContextSetFillColorWithColor(context, UIColor.redColor().CGColor)
        CGContextFillRect(context, self.bounds)
        CGContextDrawRadialGradient(context, gradient, topLeft, 0, topLeft, self.bounds.size.width, 0)
        CGContextDrawRadialGradient(context, gradient, bottomRight, 0, bottomRight, self.bounds.size.width, 0)

        CGContextRestoreGState(context)
    }

}

Gradient in corner

2 Answers2