How to add shadow to a transparent UIView?

Question

How can I reproduce this shadowing? My problem, that if I use high alpha color or clearColor, there is no drop shadow, if I use low alpha color, I can't see the drop shadow under the plate. As the level of the volume is changing (colorful part) the shadow is moving also, so it is not pure Photoshop.

Answer 1

I used an UIImageView to provide the shadow. I created an image of 1 pixel wide, by 12 pixels high. The image was black, but the alpha was a gradient from 0.5 at the top to 0.0 at the bottom eg. RGBA 1.0,1.0,1.0,0.5 -> 1.0,1.0,1.0,0.0 - I then placed the UIImageView just below the view needing the shadow, and stretched it horizontally across the width of the view. I have also used this when I needed to change the intensity of the shadow when a scroll view below is scrolling, by changing the UIImageView.alpha value

Answer 2

try something using thoses properies of your view. it might end up with something

    view.layer.shadowColor = [UIColor colorWithWhite:.5 alpha:1].CGColor;
    view.layer.shadowRadius = 4.0f;
    view.layer.shadowPath = CGPathCreateWithRect(CGRectMake(0, 0, 50, 50), NULL);
    view.layer.shadowOpacity = 1.0f;
    view.layer.shadowOffset = CGSizeMake(1, 1);

it's leaking by the way should CGPathRelease(rect) at the end sorry.

Answer 3

You will have two images one is the colorful image, and the other will be the shadow of it the shadow will expand and increase in width with the expansion of the colorful part

There is no native way to do what you are asking,

Answer 4

After searching and not finding an answer to this question I wrote the following extension in Swift 5:

extension UIView {
    func makeClearViewWithShadow(
        cornderRadius: CGFloat,
        shadowColor: CGColor,
        shadowOpacity: Float,
        shadowRadius: CGFloat) {

        self.frame = self.frame.insetBy(dx: -shadowRadius * 2,
                                        dy: -shadowRadius * 2)
        self.backgroundColor = .clear
        let shadowView = UIView(frame: CGRect(
            x: shadowRadius * 2,
            y: shadowRadius * 2,
            width: self.frame.width - shadowRadius * 4,
            height: self.frame.height - shadowRadius * 4))
        shadowView.backgroundColor = .black
        shadowView.layer.cornerRadius = cornderRadius
        shadowView.layer.borderWidth = 1.0
        shadowView.layer.borderColor = UIColor.clear.cgColor

        shadowView.layer.shadowColor = shadowColor
        shadowView.layer.shadowOpacity = shadowOpacity
        shadowView.layer.shadowRadius = shadowRadius
        shadowView.layer.masksToBounds = false
        self.addSubview(shadowView)

        let p:CGMutablePath = CGMutablePath()
        p.addRect(self.bounds)
        p.addPath(UIBezierPath(roundedRect: shadowView.frame, cornerRadius: shadowView.layer.cornerRadius).cgPath)

        let s = CAShapeLayer()
        s.path = p
        s.fillRule = CAShapeLayerFillRule.evenOdd

       self.layer.mask = s
    }
}

Usage Example:

myView.makeClearViewWithShadow(cornderRadius: 20, shadowColor: UIColor.black.cgColor, shadowOpacity: 0.5, shadowRadius: 30)