Adding shadow to top of UIView

Question

How can I add a shadow to the top of my UIView I've tried the following but with no luck...

childView.layer.cornerRadius = 5;
childView.layer.masksToBounds = YES;
childView.layer.shadowOffset = CGSizeMake(-15, 20);
childView.layer.shadowRadius = 5;
childView.layer.shadowOpacity = 0.5;

When you say "top", you mean "in front" or "above"? If you mean above, the `y` value on `CGSizeMake` should be negative. — Gonzo, Jun 09 '14 at 20:28

score 28 · Answer 1 · answered Oct 31 '17 at 15:05

Swift 3 Extension:

This includes default values for the app I'm working on, but you can change them to match the style you want in your app.

enum VerticalLocation: String {
    case bottom
    case top  
}

extension UIView {
    func addShadow(location: VerticalLocation, color: UIColor = .black, opacity: Float = 0.5, radius: CGFloat = 5.0) {
        switch location {
        case .bottom:
             addShadow(offset: CGSize(width: 0, height: 10), color: color, opacity: opacity, radius: radius)
        case .top:
            addShadow(offset: CGSize(width: 0, height: -10), color: color, opacity: opacity, radius: radius)
        }
    }

    func addShadow(offset: CGSize, color: UIColor = .black, opacity: Float = 0.5, radius: CGFloat = 5.0) {
        self.layer.masksToBounds = false
        self.layer.shadowColor = color.cgColor
        self.layer.shadowOffset = offset
        self.layer.shadowOpacity = opacity
        self.layer.shadowRadius = radius
    }
}

This seems to add a shadow to all subviews – Vincil Bishop Sep 14 '18 at 14:45 — Vincil Bishop, Sep 14 '18 at 14:45

score 6 · Answer 2 · answered Jun 09 '14 at 20:29

6

You need to set the childview's masksToBounds property to NO in order to make the shadow visible.

childView.layer.masksToBounds = NO;

answered Jun 09 '14 at 20:29

Mischa

15,816
8
59
117

1

what if I want the view to also be rounded? http://stackoverflow.com/questions/1509547/uiview-with-rounded-corners – Apollo Jun 09 '14 at 20:43

score 4 · Answer 3 · answered Jan 13 '20 at 10:22

1.Step: First create an outlet of uiview

2.Step:

    buttonBackgroundView.layer.shadowOpacity = 0.7
    buttonBackgroundView.layer.shadowOffset = CGSize(width: 3, height: 3)
    buttonBackgroundView.layer.shadowRadius = 15.0
    buttonBackgroundView.layer.shadowColor = UIColor.black.cgColor

joels · Answer 4 · 2014-06-09T21:32:46.737

1

Set your masksToBounds = NO. The reason you are not seeing the shadow is because it is completely hidden behind your view when the masksToBounds is YES.

If your button is rounded you can instead adjust the view's imageEdgeInset value. ie: UIEdgeInsetsMake(5, 0, 0, 10);

edited Jun 09 '14 at 21:32

answered Jun 09 '14 at 20:30

joels

1,292
15
21

score 0 · Answer 5 · edited May 23 '17 at 12:02

0

Try setting masksToBounds to NO. According to this link Whats the best way to add a drop shadow to my UIView making that YES will clip the layers extending past the view's bounds.

edited May 23 '17 at 12:02

Community

1
1

answered Jun 09 '14 at 20:29

Literphor

498
4
16

score 0 · Answer 6 · answered Apr 07 '21 at 12:35

Answer is in UIBezierPath

You can find a really interesting article there: https://www.hackingwithswift.com/articles/155/advanced-uiview-shadow-effects-using-shadowpath

layer.shadowOffset = CGSize(width: 0, height: -2)
layer.shadowRadius = 5
layer.shadowPath = UIBezierPath(rect: CGRect(x: -1,
                                             y: -1,
                                             width: self.bounds.width,
                                             height: self.layer.shadowRadius)).cgPath

Adding shadow to top of UIView

6 Answers6