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

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 2

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)

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

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 5

My solution was to subclass UIView. It works even if view gets resized.

import UIKit

class ShadowOutsideView: UIView {
  let color: CGColor
  let opacity: Float
  let radius: CGFloat
  let offset: CGSize
  let shadowView = UIView()
  
  init(
    color: CGColor,
    opacity: Float,
    radius: CGFloat,
    offset: CGSize
  ) {
    self.color = color
    self.opacity = opacity
    self.radius = radius
    self.offset = offset
    super.init(frame: CGRect.zero)
    shadowView.frame = bounds
    shadowView.backgroundColor = .black
    shadowView.layer.shadowColor = color
    shadowView.layer.shadowOpacity = opacity
    shadowView.layer.shadowRadius = radius
    shadowView.layer.shadowOffset = offset
    shadowView.layer.masksToBounds = false
    self.addSubview(shadowView)
    
  }
  
  override func layoutSubviews() {
    shadowView.frame = bounds
    let inset = -(max(abs(offset.width), abs(offset.height))+radius) - 10 
    // - 10, had to put 10px extra otherwise it would cut shadow
    let maskFrame = bounds.inset(by: UIEdgeInsets(top: inset, left: inset, bottom: inset, right: inset))
    let p = CGMutablePath()
    p.addRect(maskFrame)
    p.addRect(bounds)
    let s = CAShapeLayer()
    s.path = p
    s.fillRule = .evenOdd
    shadowView.layer.mask = s
  }
}