Creating a shadow for a UIImageView that has rounded corners? Creating a shadow for a UIImageView that has rounded corners? ios ios

Creating a shadow for a UIImageView that has rounded corners?


If you set clipsToBounds to true, this will round the corners but prevent the shadow from appearing. In order to resolve this, you can create two views. The container view should have the shadow, and its subview should have the rounded corners.

The container view has clipsToBounds set to false, and has the shadow properties applied. If you want the shadow to be rounded as well, use the UIBezierPath constructor that takes in a roundedRect and cornerRadius.

let outerView = UIView(frame: CGRect(x: 0, y: 0, width: 100, height: 100))outerView.clipsToBounds = falseouterView.layer.shadowColor = UIColor.black.cgColorouterView.layer.shadowOpacity = 1outerView.layer.shadowOffset = CGSize.zeroouterView.layer.shadowRadius = 10outerView.layer.shadowPath = UIBezierPath(roundedRect: outerView.bounds, cornerRadius: 10).cgPath

Next, set the image view (or any other type of UIView) to be the same size of the container view, set clipsToBounds to true, and give it a cornerRadius.

let myImage = UIImageView(frame: outerView.bounds)myImage.clipsToBounds = truemyImage.layer.cornerRadius = 10

Finally, remember to make the image view a subview of the container view.

outerView.addSubview(myImage)

The result should look something like this:

enter image description here


Swift 5:

You can use the below extension:

extension UIImageView {    func applyshadowWithCorner(containerView : UIView, cornerRadious : CGFloat){        containerView.clipsToBounds = false        containerView.layer.shadowColor = UIColor.black.cgColor        containerView.layer.shadowOpacity = 1        containerView.layer.shadowOffset = CGSize.zero        containerView.layer.shadowRadius = 10        containerView.layer.cornerRadius = cornerRadious        containerView.layer.shadowPath = UIBezierPath(roundedRect: containerView.bounds, cornerRadius: cornerRadious).cgPath        self.clipsToBounds = true        self.layer.cornerRadius = cornerRadious    }}

How to use:

  1. Drag a UIView on the storyboard
  2. Drag an ImageView inside that UIView

Storyboard should look like this:

enter image description here

  1. Create IBOutlet for both Views, call extension on your ImageView, and pass above created UIView as an argument.

Here is the output :

enter image description here


Here is a another solution (tested code) in swift 2.0

If you set clipsToBounds to true, this will round the corners but prevent the shadow from appearing. So, you can add same size UIView in storyboard behind imageview and we can give shadow to that view

SWIFT 2.0

outerView.layer.cornerRadius = 20.0outerView.layer.shadowColor = UIColor.blackColor().CGColorouterView.layer.shadowOffset = CGSizeMake(0, 2)outerView.layer.shadowOpacity = 1outerView.backgroundColor = UIColor.whiteColor()