Gradient over UIImageView

Question

I've been trying to fill an image view with a gradient layer, but I can't seem to make it work, I tried to create CAGradientLayer, applied 2 colors on it then applied it as a mask to the main image layer.

let gradient = CAGradientLayer()
gradient.frame = (self.imageView?.bounds)!
gradient.colors = [UIColor.blue.cgColor, UIColor.purple.cgColor]
gradient.startPoint = CGPoint(x: 0.0, y: 0.5)
gradient.endPoint = CGPoint(x: 0.5, y: 1.0)
gradient.locations = [0, 1]
self.imageView?.layer.mask = gradient

This is what I have, and this is what I want as a result:

First Second

UPDATE: Found the solution here.

You have it backwards. You use the image to mask the gradient. The thing with the alpha channel is always the mask because it provides the transparency info. — Josh Homann, Oct 31 '16 at 21:14

score 0 · Answer 1 · answered Oct 31 '16 at 21:02

0

You can do something like this:

var gradient = CAGradientLayer()
gradient.frame = imageView.bounds
gradient.colors = [UIColor.blue.cgColor, UIColor.purple.cgColor]
imageView.layer.insertSublayer(gradient, at: 0)

answered Oct 31 '16 at 21:02

Bhavuk Jain

2,167
1
15
23

Thank you for your answer, I did try this before, it draws a gradient over the image indeed, but it draws a gradient square over the image, it does not match the shape of the original image – Romain Boces Oct 31 '16 at 21:08

score 0 · Answer 2 · answered Dec 14 '19 at 19:33

I got this answer. Add extension of UIImage and just pass colours list to apply gradient.

import UIKit

extension UIImage {

func tintedWithLinearGradientColors(colorsArr: [CGColor]) -> UIImage {
    UIGraphicsBeginImageContextWithOptions(self.size, false, self.scale);
    guard let context = UIGraphicsGetCurrentContext() else {
        return UIImage()
    }
    context.translateBy(x: 0, y: self.size.height)
    context.scaleBy(x: 1, y: -1)

    context.setBlendMode(.normal)
    let rect = CGRect.init(x: 0, y: 0, width: size.width, height: size.height)

    // Create gradient
    let colors = colorsArr as CFArray
    let space = CGColorSpaceCreateDeviceRGB()
    let gradient = CGGradient(colorsSpace: space, colors: colors, locations: nil)

    // Apply gradient
    context.clip(to: rect, mask: self.cgImage!)
    context.drawLinearGradient(gradient!, start: CGPoint(x: 0, y: 0), end: CGPoint(x: 0, y: self.size.height), options: .drawsAfterEndLocation)
    let gradientImage = UIGraphicsGetImageFromCurrentImageContext()
    UIGraphicsEndImageContext()

    return gradientImage!
}
}

Gradient over UIImageView

2 Answers2