Search code examples
ioscalayer

Add a shadow with CAShapeLayer?


I have a CAShapeLayer with bottom rounded corners only. What I want is to add a shadow at the bottom, but it's not working, even though the code looks obviously right. All it does it round the bottom corners but I don't see a shadow.

let shapeLayer = CAShapeLayer()

    let path = UIBezierPath(roundedRect: self.bounds, byRoundingCorners: [.bottomLeft, .bottomRight], cornerRadii: CGSize(width: 20, height: 20)).cgPath
    shapeLayer.path = path

    shapeLayer.shadowColor = UIColor(r: 233, g: 233, b: 233).cgColor
    shapeLayer.shadowOffset = CGSize(width: 0.0, height: 2.8)
    shapeLayer.shadowOpacity = 1.0
    shapeLayer.shadowRadius = 0.0
    shapeLayer.shouldRasterize = true
    shapeLayer.rasterizationScale = UIScreen.main.scale

    layer.rasterizationScale = UIScreen.main.scale
    layer.mask = shapeLayer

Solution

  • The shapeLayer is rounding the corners of your view because it's set as the layer's mask. You probably want to add it as a sublayer instead.

    Old:

    layer.mask = shapeLayer
    

    New:

    layer.addSublayer(shapeLayer)
    

    I wrote another answer about adding a shadow to a view with rounded corners here if it helps: https://stackoverflow.com/a/41475658/6658553