add Shadow on UIView using swift 3

Question

prior swift 3 i was adding shadow in my UIView like this :

//toolbar is an UIToolbar (UIView)
toolbar.layer.masksToBounds = false
toolbar.layer.shadowOffset = CGSize(width: -1, height: 1)
toolbar.layer.shadowRadius = 1
toolbar.layer.shadowOpacity = 0.5

but the above code is not working in swift 3 , instead of shadow my whole View's color is turned to ugly gray

anyone knows how can we add shadow in swift 3 ?

aashish tamsya · Accepted Answer · 2018-09-21T17:36:39.073

229

CODE SNIPPET:

extension UIView {

  // OUTPUT 1
  func dropShadow(scale: Bool = true) {
    layer.masksToBounds = false
    layer.shadowColor = UIColor.black.cgColor
    layer.shadowOpacity = 0.5
    layer.shadowOffset = CGSize(width: -1, height: 1)
    layer.shadowRadius = 1

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

  // OUTPUT 2
  func dropShadow(color: UIColor, opacity: Float = 0.5, offSet: CGSize, radius: CGFloat = 1, scale: Bool = true) {
    layer.masksToBounds = false
    layer.shadowColor = color.cgColor
    layer.shadowOpacity = opacity
    layer.shadowOffset = offSet
    layer.shadowRadius = radius

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

NOTE: If you don't pass any parameter to that function, then the scale argument will be true by default. You can define a default value for any parameter in a function by assigning a value to the parameter after that parameter’s type. If a default value is defined, you can omit that parameter when calling the function.

OUTPUT 1:

shadowView.dropShadow()

OUTPUT 2:

shadowView.dropShadow(color: .red, opacity: 1, offSet: CGSize(width: -1, height: 1), radius: 3, scale: true)

layer.shouldRasterize = true will make the shadow static and cause a shadow for the initial state of the UIView. So I would recommend not to use layer.shouldRasterize = true in dynamic layouts like view inside a UITableViewCell.

edited Sep 21 '18 at 17:36

answered Nov 21 '16 at 12:24

aashish tamsya

4,903
3
23
34

1

if i want to remove this shadow, how m i supposed to do that? – Suhas Arvind Patil Nov 16 '17 at 11:16
8

@SuhasPatil if you want to remove the shadow then, why you adding it in the first place? Can you please elaborate your scenario so that I can give you a solution? – aashish tamsya Nov 17 '17 at 11:59
Actually for cell selection there will be shadow and deselection no shadow – Suhas Arvind Patil Nov 17 '17 at 15:56
@SuhasPatil if you want the shadow to be removed just change the `shadowOpacity` to 0 – aashish tamsya Nov 19 '17 at 16:00
1

Why are we rasterizing here? Created pixelation on the image in my view that used the shadow. – davidrynn Jan 11 '18 at 16:03
I would modify offSet to two variables: offsetX and offsetY. That way you don't have to input those two values as "width" and "height" (which sounds a bit wrong) – budiDino Feb 05 '18 at 17:46
@SuhasPatil how did ur remove the shadow? – iosMentalist Jul 19 '18 at 09:07
@iosMentalisti have removed all the sublayers as sublayer.removeFromSuperlayer() – Suhas Arvind Patil Jul 19 '18 at 11:44
1

Something here make the shadow get a static size, so this not good for different devices – Daniel Beltrami Sep 21 '18 at 12:58
`layer.shouldRasterize = true` make it static size, if you are using shadow for dynamic content like `UITableViewCell` etc, then you should not rasterize it. as the question here is simple: to add shadow to a `UIView`, not a resizing `UITableViewCell` – aashish tamsya Sep 21 '18 at 17:34
1

Worked for me in Swift 4.2, if you want to add shadow then do this : viewLoginCustom.dropShadow(color: yourColor, opacity: 1, offSet: CGSize.zero, radius: 3, scale: true) – Ravi May 02 '19 at 07:19
If this isn't working you might need to run the function in 'override func viewDidLayoutSubviews()' – Ben Oct 31 '19 at 19:52
It is not worked. Swift 5, I just create a small project to add this shadow on an UIImage. – Zhou Haibo Aug 02 '21 at 05:33

score 59 · Answer 2 · edited Aug 18 '20 at 09:49

Shadow using UIView Extension Swift 4

I would like to add one more line with selected answer! When we rasterizing the layer, It needs to be set to 2.0 for retina displays. Otherwise label text or images on that view will be blurry. So we need to add rasterizationScale also.

  extension UIView {

    func dropShadow() {
        layer.masksToBounds = false
        layer.shadowColor = UIColor.black.cgColor
        layer.shadowOpacity = 0.5
        layer.shadowOffset = CGSize(width: -1, height: 1)
        layer.shadowRadius = 1
        layer.shadowPath = UIBezierPath(rect: self.bounds).cgPath
        layer.shouldRasterize = true
        layer.rasterizationScale = UIScreen.main.scale
    }
}

All those `self.` are unnecessary. – ThomasW Jun 10 '20 at 09:18 — ThomasW, Jun 10 '20 at 09:18

score 52 · Answer 3 · answered Mar 09 '18 at 10:30

52

Very simple and few lines of code:

let viewShadow = UIView(frame: CGRect(x: 0, y: 0, width: 200, height: 200))
viewShadow.center = self.view.center
viewShadow.backgroundColor = UIColor.yellow
viewShadow.layer.shadowColor = UIColor.red.cgColor
viewShadow.layer.shadowOpacity = 1
viewShadow.layer.shadowOffset = CGSize.zero
viewShadow.layer.shadowRadius = 5
self.view.addSubview(viewShadow)

Look like :

answered Mar 09 '18 at 10:30

Mr.Javed Multani

12,549
4
53
52

1

How can this work without setting masksToBounds to false – Shivam Pokhriyal Feb 21 '19 at 12:36
2

@ShivamPokhriyal maskToBounds defaults to false. – chengsam Mar 11 '19 at 16:07

score 22 · Answer 4 · answered Jul 10 '18 at 07:51

22

This works for me (Swift 3 and 4)

yourView.layer.shadowColor = UIColor.gray.cgColor
yourView.layer.shadowOpacity = 0.3
yourView.layer.shadowOffset = CGSize.zero
yourView.layer.shadowRadius = 6

answered Jul 10 '18 at 07:51

Chhaileng

2,428
1
27
24

3

Thanks! If you change the third line as below. Shadow is more visible for people who tries for the first time. yourView.layer.shadowOffset = CGSize(width: 2, height: 2) – Ahmet Akkök Aug 05 '18 at 21:34
1

How can this work without setting masksToBounds to false – Shivam Pokhriyal Feb 21 '19 at 12:35

score 11 · Answer 5 · answered Jul 16 '19 at 11:52

Very easy to use extension for UIView, editable directly from storyboard. Swift 4+

@IBDesignable extension UIView {
    @IBInspectable var shadowColor: UIColor?{
        set {
            guard let uiColor = newValue else { return }
            layer.shadowColor = uiColor.cgColor
        }
        get{
            guard let color = layer.shadowColor else { return nil }
            return UIColor(cgColor: color)
        }
    }

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

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

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

budiDino · Answer 6 · 2018-02-28T00:47:06.907

Although the accepted answer is great and it works as it should, I've modified it to split offSet: CGSize to offsetX: CGFloat and offsetY: CGFloat.

extension UIView {
  func dropShadow(offsetX: CGFloat, offsetY: CGFloat, color: UIColor, opacity: Float, radius: CGFloat, scale: Bool = true) {
    layer.masksToBounds = false
    layer.shadowOffset = CGSize(width: offsetX, height: offsetY)
    layer.shadowColor = color.cgColor
    layer.shadowOpacity = opacity
    layer.shadowRadius = radius
    layer.shadowPath = UIBezierPath(rect: self.bounds).cgPath
    layer.shouldRasterize = true
    layer.rasterizationScale = scale ? UIScreen.main.scale : 1
  }
}

Shakeel Ahmed · Answer 7 · 2022-05-18T06:41:25.637

Swift 5 Just call this function and pass your view

public func setViewSettingWithBgShade(view: UIView)
{
    view.layer.cornerRadius = 8
    view.layer.borderWidth = 1
    view.layer.borderColor = UIColor.red.cgColor
    
    //MARK:- Shade a view
    view.layer.shadowOpacity = 0.5
    view.layer.shadowOffset = CGSize(width: 1.0, height: 1.0)
    view.layer.shadowRadius = 3.0
    view.layer.shadowColor = UIColor.black.cgColor
    view.layer.masksToBounds = false
}

score 4 · Answer 8 · edited Mar 28 '19 at 12:33

4

Please Try this

func applyShadowOnView(_ view: UIView) {
    view.layer.cornerRadius = 8
    view.layer.shadowColor = UIColor.darkGray.cgColor
    view.layer.shadowOpacity = 1
    view.layer.shadowOffset = .zero
    view.layer.shadowRadius = 5
}

edited Mar 28 '19 at 12:33

Dhruv

2,153
3
21
45

answered Mar 28 '19 at 11:29

Hariom tyagi

41
1

score 4 · Answer 9 · edited Jan 28 '22 at 11:00

Please try this, it's working for me.

extension UIView {

    func dropShadow() {
    
        layer.shadowColor = UIColor.black.cgColor
        layer.shadowOffset = CGSize(width: 2, height: 3)
        layer.masksToBounds = false
    
        layer.shadowOpacity = 0.3
        layer.shadowRadius = 3
        //layer.shadowPath = UIBezierPath(rect: bounds).cgPath
        layer.rasterizationScale = UIScreen.main.scale
        layer.shouldRasterize = true
    }
}

Anton Sokolov · Answer 10 · 2018-12-26T06:31:08.063

If you need rounded shadow. Works for swift 4.2

extension UIView {

        func dropShadow() {

            var shadowLayer: CAShapeLayer!
            let cornerRadius: CGFloat = 16.0
            let fillColor: UIColor = .white

            if shadowLayer == nil {
                shadowLayer = CAShapeLayer()

                shadowLayer.path = UIBezierPath(roundedRect: bounds, cornerRadius: cornerRadius).cgPath
                shadowLayer.fillColor = fillColor.cgColor

                shadowLayer.shadowColor = UIColor.black.cgColor
                shadowLayer.shadowPath = shadowLayer.path
                shadowLayer.shadowOffset = CGSize(width: -2.0, height: 2.0)
                shadowLayer.shadowOpacity = 0.8
                shadowLayer.shadowRadius = 2

                layer.insertSublayer(shadowLayer, at: 0)
            }
        }
    }

Swift 4 rounded UIView with shadow

score 3 · Answer 11 · answered Apr 27 '19 at 06:19

3

We can apply drop shadow by following way also

    cell.view1.layer.masksToBounds = false
    cell.view1.layer.shadowColor = UIColor.lightGray.cgColor
    cell.view1.backgroundColor = UIColor.white
    cell.view1.layer.shadowOffset = CGSize(width: 1.0, height: 1.0)
    cell.view1.layer.shadowOpacity = 0.5

Result will be : http://prntscr.com/nhhv2s

answered Apr 27 '19 at 06:19

Anita Nagori

707
1
7
21

you made my day. Putting the backgroundColor did the trick :) – Codobux May 26 '22 at 14:48
great then please do upvote :) – Anita Nagori May 31 '22 at 08:12

score 3 · Answer 12 · answered Jun 09 '22 at 10:02

3

For swift 5 users can do this way.

extension UIView {
  func addShadow() {
    self.layer.shadowColor = UIColor.gray.cgColor
    self.layer.shadowOffset = CGSize(width: 1, height: 1)
    self.layer.shadowOpacity = 1
  }
}

answered Jun 09 '22 at 10:02

Navdeep Paliwal

349
3
7

score 2 · Answer 13 · answered Feb 10 '20 at 06:18

    func shadow(Vw : UIView)
    {
        Vw.layer.masksToBounds = false
        Vw.layer.shadowColor =  colorLiteral(red: 0.5058823529, green: 0.5333333333, blue: 0.6117647059, alpha: 1)
        Vw.layer.shadowOffset = CGSize(width: 0, height: 1)
        Vw.layer.shadowRadius = 5.0
        Vw.layer.shadowOpacity = 15.0
        Vw.layer.cornerRadius = 5.0
    }

score 1 · Answer 14 · answered May 18 '18 at 15:32

1

loginView.layer.shadowOpacity = 1.0

answered May 18 '18 at 15:32

Hitesh Chauhan

1,520
15
16

score 1 · Answer 15 · answered Sep 17 '20 at 08:09

1

I will suggest you to use below the library because it allows you to set default values in one file and you can use it everywhere in the project without making one line of change. https://github.com/Shahbaz89khan/ShadowView

answered Sep 17 '20 at 08:09

Shehbaz Khan

1,892
3
24
31

score 0 · Answer 16 · answered Oct 05 '18 at 10:26

Swift 4

toolbar.layer.shadowColor = UIColor.hex(hexColor: "#000000", withAlpha: 1.0).cgColor
toolbar.layer.shadowOffset = CGSize.zero
toolbar.layer.shadowRadius = 1
toolbar.layer.shadowOpacity = 1
toolbar.layer.shouldRasterize = true
toolbar.layer.masksToBounds = false

score 0 · Answer 17 · answered Oct 28 '18 at 22:40

If you want to use it as a IBInspectable property for your views you can add this extension

import UIKit

extension UIView {

    private static var _addShadow:Bool = false

    @IBInspectable var addShadow:Bool {
        get {
            return UIView._addShadow
        }
        set(newValue) {
            if(newValue == true){
                layer.masksToBounds = false
                layer.shadowColor = UIColor.black.cgColor
                layer.shadowOpacity = 0.075
                layer.shadowOffset = CGSize(width: 0, height: -3)
                layer.shadowRadius = 1

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

}

score 0 · Answer 18 · answered Apr 07 '20 at 15:04

0

After spent lot of hours, I just find out the solution, just add this simple line.

backgroundColor = .white

Hope this help you!

answered Apr 07 '20 at 15:04

Cường Nguyễn

15
3

yoAlex5 · Answer 19 · 2022-09-10T12:23:14.477

0

iOS shadow

[Advanced example]

You are able to setup shadow using layer

view1.layer.shadowColor = UIColor.magenta.cgColor

view1.layer.shadowOffset = CGSize(width: 0, height: 0)
view1.layer.shadowOpacity = 1
view1.layer.shadowRadius = 0

edited Sep 10 '22 at 12:23

answered Aug 28 '22 at 13:38

yoAlex5

29,217
8
193
205

score -1 · Answer 20 · edited Feb 12 '19 at 20:20

-1

Applies shadow over the View

func applyShadowOnView(_ view:UIView) {

        view.layer.cornerRadius = 8
        view.layer.shadowColor = UIColor.darkGray.cgColor
        view.layer.shadowOpacity = 1
        view.layer.shadowOffset = CGSize.zero
        view.layer.shadowRadius = 5

}

edited Feb 12 '19 at 20:20

Jonas Deichelmann

3,513
1
30
45

answered Nov 24 '18 at 14:02

Wasim

921
12
14

1

How can this work without setting masksToBounds to false – Shivam Pokhriyal Feb 21 '19 at 12:35

add Shadow on UIView using swift 3

20 Answers20

Applies shadow over the View

Linked