How to control shadow spread and blur?

Here's how to apply all 6 Sketch shadow properties to a UIView's layer with near perfect accuracy:

extension CALayer {  func applySketchShadow(    color: UIColor = .black,    alpha: Float = 0.5,    x: CGFloat = 0,    y: CGFloat = 2,    blur: CGFloat = 4,    spread: CGFloat = 0)  {    masksToBounds = false    shadowColor = color.cgColor    shadowOpacity = alpha    shadowOffset = CGSize(width: x, height: y)    shadowRadius = blur / 2.0    if spread == 0 {      shadowPath = nil    } else {      let dx = -spread      let rect = bounds.insetBy(dx: dx, dy: dx)      shadowPath = UIBezierPath(rect: rect).cgPath    }  }}

Say we want to represent the following:

You can easily do this via:

myView.layer.applySketchShadow(  color: .black,   alpha: 0.5,   x: 0,   y: 0,   blur: 4,   spread: 0)

or more succinctly:

myView.layer.applySketchShadow(y: 0)

Example:

Left: iPhone 8 UIView screenshot; right: Sketch rectangle.

Note:

• When using a non-zero spread, it hardcodes a path based on the bounds of the CALayer. If the layer's bounds ever change, you'd want to call the applySketchShadow() method again.

You can try this .... you can play with the values.The shadowRadius dictates the amount of blur. shadowOffset dictates where the shadow goes.

Swift 2.0

let radius: CGFloat = demoView.frame.width / 2.0 //change it to .height if you need spread for heightlet shadowPath = UIBezierPath(rect: CGRect(x: 0, y: 0, width: 2.1 * radius, height: demoView.frame.height))//Change 2.1 to amount of spread you need and for height replace the code for heightdemoView.layer.cornerRadius = 2demoView.layer.shadowColor = UIColor.blackColor().CGColordemoView.layer.shadowOffset = CGSize(width: 0.5, height: 0.4)  //Here you control x and ydemoView.layer.shadowOpacity = 0.5demoView.layer.shadowRadius = 5.0 //Here your control your blurdemoView.layer.masksToBounds =  falsedemoView.layer.shadowPath = shadowPath.CGPath

Swift 3.0

let radius: CGFloat = demoView.frame.width / 2.0 //change it to .height if you need spread for height let shadowPath = UIBezierPath(rect: CGRect(x: 0, y: 0, width: 2.1 * radius, height: demoView.frame.height)) //Change 2.1 to amount of spread you need and for height replace the code for heightdemoView.layer.cornerRadius = 2demoView.layer.shadowColor = UIColor.black.cgColordemoView.layer.shadowOffset = CGSize(width: 0.5, height: 0.4)  //Here you control x and ydemoView.layer.shadowOpacity = 0.5demoView.layer.shadowRadius = 5.0 //Here your control your blurdemoView.layer.masksToBounds =  falsedemoView.layer.shadowPath = shadowPath.cgPath

Example with spread

To create a basic shadow

    demoView.layer.cornerRadius = 2    demoView.layer.shadowColor = UIColor.blackColor().CGColor    demoView.layer.shadowOffset = CGSizeMake(0.5, 4.0); //Here your control your spread    demoView.layer.shadowOpacity = 0.5     demoView.layer.shadowRadius = 5.0 //Here your control your blur

Basic Shadow example in Swift 2.0

Sketch Shadow Using IBDesignable and IBInspectable in Swift 4

SKETCH AND XCODE SIDE BY SIDE

CODE

@IBDesignable class ShadowView: UIView {    @IBInspectable var shadowColor: UIColor? {        get {            if let color = layer.shadowColor {                return UIColor(cgColor: color)            }            return nil        }        set {            if let color = newValue {                layer.shadowColor = color.cgColor            } else {                layer.shadowColor = nil            }        }    }    @IBInspectable var shadowOpacity: Float {        get {            return layer.shadowOpacity        }        set {            layer.shadowOpacity = newValue        }    }    @IBInspectable var shadowOffset: CGPoint {        get {            return CGPoint(x: layer.shadowOffset.width, y:layer.shadowOffset.height)        }        set {            layer.shadowOffset = CGSize(width: newValue.x, height: newValue.y)        }     }    @IBInspectable var shadowBlur: CGFloat {        get {            return layer.shadowRadius        }        set {            layer.shadowRadius = newValue / 2.0        }    }    @IBInspectable var shadowSpread: CGFloat = 0 {        didSet {            if shadowSpread == 0 {                layer.shadowPath = nil            } else {                let dx = -shadowSpread                let rect = bounds.insetBy(dx: dx, dy: dx)                layer.shadowPath = UIBezierPath(rect: rect).cgPath            }        }    }}

OUTPUT

HOW TO USE IT