UIView Shadow Gradient

Question

I have created a custom UIView in my iOS project that has a drop shadow. My aim is to apply the same gradient to the shadow as it is on the view's background.

Below is an example of how my current solid colour shadows look.

This is done through a subclass of UIView with the below code:

override func layoutSubviews() {
    let gradientLayer = layer as! CAGradientLayer
    gradientLayer.colors = [topColor.cgColor, bottomColor.cgColor]
    gradientLayer.startPoint = CGPoint(x: startPointX, y: startPointY)
    gradientLayer.endPoint = CGPoint(x: endPointX, y: endPointY)
    layer.cornerRadius = cornerRadius
    layer.shadowColor = shadowColor.cgColor
    layer.shadowOffset = CGSize(width: shadowX, height: shadowY)
    layer.shadowRadius = shadowBlur
    layer.shadowOpacity = 1

    let inset: CGFloat = bounds.width * 0.05
    layer.shadowPath = UIBezierPath(roundedRect: bounds.insetBy(dx: inset, dy: 0.0), cornerRadius: cornerRadius).cgPath
}

I have been playing around with creating a second gradient layer and masking it to the shadow but have had no luck. Please point me in the right direction!

Answer 1

I think you can't do more with standard CALayer shadow. Take a look at filters property of CALayer.

https://developer.apple.com/documentation/quartzcore/calayer/1410901-filters

Create second CAGradientLayer and apply a GausianBlur filter for example.

https://developer.apple.com/library/content/documentation/GraphicsImaging/Reference/CoreImageFilterReference/index.html#//apple_ref/doc/filter/ci/CIGaussianBlur

Disable standard layer shadows and add your blurred layer as sublayer.

Answer 2

Use my code for your requirement available in my gitRepo https://github.com/Krishnarjun-Banoth/BlurView/tree/master/Shadows

Step1: Just drag and drop BlurEffect.swift file in your project.

Step2: Then simply Use below View extension methods for each one your views individually.

  testView.applyGradient(colours: [UIColor.blue,UIColor.orange]) //pass your required colours.
  testView.blur(blurRadius: 5.0)

Note: Inspired from @Jacek Głazik answer and FlexMonkey's tutorial.