UIView transparent gradient

Given an arbitrary UIView on iOS, is there a way using Core Graphics (CAGradientLayer comes to mind) to apply a “foreground-transparent” gradient to it?

I can’t use a standard CAGradientLayer because the background is more complex than a UIColor. I also can’t overlay a PNG because the background will change as my subview is scrolled along its parent vertical scrollview (see image).

  • How can you apply distortions to a UIImage using OpenGL ES?
  • Animate a layer property which simply changes other properties?
  • Draw VU meter using Core Graphics in iOS
  • How do I check if CGContext contains point?
  • Free Drawing On UIImage Embedded in UIScrollView
  • How to erase some portion of a UIImageView's image on iOS?
  • I have a non-elegant fallback: have my uiview clip its subviews and move a pre-rendered gradient png of the background as the parent scrollview is scrolled.

    transparent uiview gradient problem

    4 Solutions Collect From Internet About “UIView transparent gradient”

    This was an embarrassingly easy fix: apply a CAGradientLayer as my subview’s mask.

    CAGradientLayer *gradientLayer = [CAGradientLayer layer];
    gradientLayer.frame = _fileTypeScrollView.bounds;
    gradientLayer.colors = [NSArray arrayWithObjects:(id)[UIColor whiteColor].CGColor, (id)[UIColor clearColor].CGColor, nil];
    gradientLayer.startPoint = CGPointMake(0.8f, 1.0f);
    gradientLayer.endPoint = CGPointMake(1.0f, 1.0f);
    _fileTypeScrollView.layer.mask = gradientLayer;

    Thanks to Cocoanetics for pointing me in the right direction!

    Gradient Example

    I just ran into the same issue and wound up writing my own class. It seems like serious overkill, but it was the only way I could find to do gradients with transparency. You can see my writeup and code example here

    It basically comes down to a custom UIView that creates two images. One is a solid color, the other is a gradient that is used as an image mask. From there I applied the resulting image to the uiview.layer.content.

    I hope it helps,

    This is how I’ll do.

    Step 1 – define a custom gradient view

    import UIKit
    class GradientView: UIView {
        override open class var layerClass: AnyClass {
            return CAGradientLayer.classForCoder()
        required init?(coder aDecoder: NSCoder) {
            super.init(coder: aDecoder)
            let gradientLayer = self.layer as! CAGradientLayer
            gradientLayer.colors = [
                UIColor.init(colorLiteralRed: 1, green: 1, blue: 1, alpha: 0).cgColor

    Step 2 – Drag and drop a UIView in your storyboard and set its custom class to GradientView

    enter image description here

    As a example, this is how the above gradient view looks like:

    enter image description here

    I hate to say it, but I think that you are into the CUSTOM UIView land. I think that I would try to implement this in a custom UIView overiding the drawRect routine.

    With this, you could have that view, place on top of your actual scrollview, and have your gradient view (if you will) “pass-on” all touch events (i.e. relinquish first responder).