Blur UiImageView at top and bottom of the frame

Reference Image

I am having an image at my view controller, while on top of the image view I am having some label but due to label text visibility I need to blur the top and bottom of the UIImageView ignorer to show the text clearly.

I have attached the screenshot for my design ignorer to get a clear cut idea.

Please referent the image for the right output.

1 answer

  • answered 2019-06-04 07:18 VRAwesome

    Add this code to your UIImageView.

    let gradientLayer = CAGradientLayer()
    gradientLayer.frame = CGRect(origin: CGPoint(x: 0, y: 0), size: CGSize(width: self.imgView.frame.size.width, height: self.imgView.frame.size.height*0.3))
    gradientLayer.colors = [UIColor.black.withAlphaComponent(0.7).cgColor, UIColor.clear.cgColor]
    self.imgView.layer.addSublayer(gradientLayer)
    
    let gradientLayer2 = CAGradientLayer()
    gradientLayer2.frame = CGRect(origin: CGPoint(x: 0, y: (self.imgView.frame.size.height-self.imgView.frame.size.height*0.3)), size: CGSize(width: self.imgView.frame.size.width, height: self.imgView.frame.size.height*0.3))
    gradientLayer2.colors = [UIColor.clear.cgColor, UIColor.black.withAlphaComponent(0.7).cgColor]
    self.imgView.layer.addSublayer(gradientLayer2)