Set only shadow on lower UIView

Question

I want to create a bottom shadow on a UIView. Right now, using this function, a shadow is created on top, bottom, left and right.

func setCardView(view : UIView){ view.layer.masksToBounds = false view.layer.shadowOffset = CGSize(width: 0, height: 0) view.layer.shadowRadius = 2 view.layer.shadowOpacity = 0.5 } 

Is it even possible to create a shadow below? Any help would be greatly appreciated. Thanks!

Answer 1

I think the right approach to shadow is that the shadow belongs to an object, which is a button, a view, and not just a part of the side. Imagining that there is a virtual light source. You cannot just create a shadow for one side.

With that said, the shadow will always be the shadow of the whole gaze. However, you can change the offset of the shadow so that it faces down.

 view.layer.shadowOffset = CGSize(width: 0, height: 3) 

This means that you want the light source to shoot light from above and the shadow from below. The reason you still see the shadow from above is the radius of the shadow. which should imitate diffuse light. The more diffused the light, the softer the shadow will be, and you will still see the upper shadow.

 view.layer.shadowRadius = 1 or 0.5 

try to reduce the radius as well. This will give you the best visual result.

To understand umber, partial shade, and antumbra, if you need, see https://en.wikipedia.org/wiki/Umbra,_penumbra_and_antumbra

Answer 2

Change shadowOffset

  view.layer.shadowOffset = CGSize(width: 0, height: 3) 

Answer 3

Here's the correct way to apply shadow in Swift:

 yourView.layer.shadowOffset = CGSize(width: 0, height: 3) yourView.layer.shadowOpacity = 0.6 yourView.layer.shadowRadius = 3.0 yourView.layer.shadowColor = UIColor.red.cgColor 

Answer 4

This code works for Swift 4 and the shadow used for viewing from below:

 view.layer.masksToBounds = false view.layer.shadowRadius = 4 view.layer.shadowOpacity = 1 view.layer.shadowColor = UIColor.gray.cgColor view.layer.shadowOffset = CGSize(width: 0 , height:2) 

Answer 5

If you really want the shadow to be on only one side of your UIView , you should set your view.layer.shadowPath to UIBezierPath .

Here is an example that will only display the shadow at the bottom of the view:

 view.layer.shadowPath = UIBezierPath(rect: CGRect(x: 0, y: bounds.maxY - layer.shadowRadius, width: bounds.width, height: layer.shadowRadius)).cgPath 

CGRect deconstructing the CGRect value, you get:

• x and width ensure that the shadow occupies the entire horizontal width of your view (you can adjust them, for example, using the value of layer.shadowRadius as the basis for your offset)
• y and height ensure that the shadow starts as low as possible and then becomes as large as the radius

Of course, in some cases this will not work, for example, when you want the shadowRadius to shadowRadius greater than the height your view. In these cases, I would recommend using an image view or masked layer.

Hope this helps,

Answer 6

An old question, but it seems that none of the answers answer this question. Although the answers above will work with low shadowRadius , in fact you will not get the 'shadow' effect.

You can absolutely add shadow only from below using UIBezierPath

Here's how -

  let shadowWidth: CGFloat = 1.2 // Shadow width, will be the width furthest away from the view, this is equivalent to 120% of the views width let shadowHeight: CGFloat = 0.3 // Shadow height, again this is equivalent to 30% let shadowRadius: CGFloat = 5 let width = someView.frame.width let height = someView.frame.height // Get width and height of the view // Plot the path let shadowPath = UIBezierPath() shadowPath.move(to: CGPoint(x: shadowRadius / 2, y: height - shadowRadius / 2)) shadowPath.addLine(to: CGPoint(x: width - shadowRadius / 2, y: height - shadowRadius / 2)) shadowPath.addLine(to: CGPoint(x: width * shadowWidth, y: height + (height * shadowHeight))) shadowPath.addLine(to: CGPoint(x: width * -(shadowWidth - 1), y: height + (height * shadowHeight))) // Add shadow someView.layer.shadowPath = shadowPath.cgPath someView.layer.shadowRadius = shadowRadius someView.layer.shadowOffset = .zero someView.layer.shadowOpacity = 0.2 

It deduces it

Or, if you want a simpler solution, with fewer options, you can go with this

  let buttonHeight = someButton.frame.height let buttonWidth = someButton.frame.width let shadowSize: CGFloat = 15 let contactRect = CGRect(x: -shadowSize, y: buttonHeight - (shadowSize * 0.2), width: buttonWidth + shadowSize * 2, height: shadowSize) someButton.layer.shadowPath = UIBezierPath(ovalIn: contactRect).cgPath someButton.layer.shadowRadius = 5 someButton.layer.shadowOpacity = 0.6 

Which will deduce it

Example here

https://github.com/hemo87/ExampleShadow/tree/master