Adding clouded shadow to UIView in swift4

Question

I want to add shadow(it is not like default it somehow clouded and blurred) for my UIView like below

I have written an extension as

func addShadow(color: UIColor = UIColor.black, opacity: Float = 0.9, radius: CGFloat = 1, scale: Bool = true) {
        self.layer.masksToBounds = false
        self.layer.shadowColor = color.cgColor

        self.layer.shadowOpacity = opacity
        self.layer.shadowRadius = radius

        self.layer.shadowPath = UIBezierPath(rect: self.bounds).cgPath
        self.layer.shouldRasterize = true
        self.layer.rasterizationScale = scale ? UIScreen.main.scale : 1
    }

Output:

but not able to get the exact output. Your help will be thankful.

Possible duplicate of [How do I draw a shadow under a UIView?](https://stackoverflow.com/questions/805872/how-do-i-draw-a-shadow-under-a-uiview) — Greg Hilston, Nov 22 '17 at 15:34
`self.layer.shadowOffset = CGSizeMake(0, -??)` should do the trick, where -?? is to be tested according to your needs... — Larme, Nov 22 '17 at 15:37

score 0 · Answer 1 · answered Nov 22 '17 at 15:40

0

I believe that you also need to set clipsToBounds.

self.clipsToBounds = false

answered Nov 22 '17 at 15:40

Peter DeWeese

18,141
8
79
101

score 0 · Answer 2 · answered Nov 22 '17 at 15:48

I use IBInspectable to treat all the views in my app. Try it out

extension UIView {

@IBInspectable var cornerRadius: CGFloat {
    set {
        layer.cornerRadius = newValue
    }
    get {
        return layer.cornerRadius
    }
}

@IBInspectable var borderWidth: CGFloat {
    set {
        layer.borderWidth = newValue
    }
    get {
        return layer.borderWidth
    }
}

@IBInspectable var borderColor: UIColor? {
    set {
        layer.borderColor = newValue?.cgColor
    }
    get {
        return UIColor(cgColor: layer.borderColor!)
    }
}

@IBInspectable var shadowOffset: CGSize {
    set {
        layer.shadowOffset = newValue
    }
    get {
        return layer.shadowOffset
    }
}

@IBInspectable var shadowOpacity: Float {
    set {
        layer.shadowOpacity = newValue
    }
    get {
        return layer.shadowOpacity
    }
}

@IBInspectable var shadowRadius: CGFloat {
    set {
        layer.shadowRadius = newValue
    }
    get {
        return layer.shadowRadius
    }
}

@IBInspectable var shadowColor: UIColor? {
    set {
        layer.shadowColor = newValue?.cgColor
    }
    get {
        return UIColor(cgColor: layer.shadowColor!)
    }
}

}

in your case you should fix shadowOffset property.

this way looking awesome to do, but didnt worked with me – Suhas Arvind Patil Nov 24 '17 at 06:54 — Suhas Arvind Patil, Nov 24 '17 at 06:54

Oleh Zayats · Answer 3 · 2017-11-22T15:55:40.127

You should disable clipToBounds in your 'containerView' (view that has your shadow dropping view placed as a subview)

Take a look at an example:

import UIKit

extension UIView {
    func addShadow(color: UIColor = UIColor.black, opacity: Float = 0.9, radius: CGFloat = 1, scale: Bool = true) {
        self.layer.masksToBounds = false
        self.layer.shadowColor = color.cgColor
        self.layer.shadowOpacity = opacity
        self.layer.shadowRadius = radius
        self.layer.shadowPath = UIBezierPath(rect: self.bounds).cgPath
        self.layer.shouldRasterize = true
        self.layer.rasterizationScale = scale ? UIScreen.main.scale : 1

    }
}

let shadowedView = UIView(frame: CGRect(x: 50, y: 50, width: 200, height: 100))
shadowedView.backgroundColor = .blue
shadowedView.layer.cornerRadius = 15.0
shadowedView.addShadow()

let mainView = UIView(frame: CGRect(x: 0, y: 0, width: 300, height:200))
mainView.backgroundColor = .white
mainView.addSubview(shadowedView)

here I will add a view container and enable clipToBounds :

let shadowedView = UIView(frame: CGRect(x: 0, y: 0, width: 200, height: 100))
shadowedView.backgroundColor = .blue
shadowedView.layer.cornerRadius = 15.0
shadowedView.addShadow()

let containerView = UIView(frame: CGRect(x: 50, y: 50, width: 200, height: 100))
containerView.addSubview(shadowedView)
containerView.clipsToBounds = true

let mainView = UIView(frame: CGRect(x: 0, y: 0, width: 300, height: 200))
mainView.backgroundColor = .white
mainView.addSubview(containerView)

Adding clouded shadow to UIView in swift4

3 Answers3