Set Shadow on Bottom UIView only

ios uiview shadow
Sonic Master picture Sonic Master · Mar 30, 2017 · Viewed 44.8k times · Source

I want to create bottom only shadow on UIView. Right now with this function, will create shadow in 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 there anyway to only create shadow in the bottom? Any help would be appreciated. Thank you!

Answer

Elvin picture Elvin · Mar 30, 2017

I think the proper way of thinking of shadow is, the shadow belongs to the object, which is the button, the uiview, not just part of the side. Imagining there is a virtual light source. You can't really just create a shadow for one side.

With that being said, the shadow will always be the shadow of the view as a whole. However, you can change the shadow offset to make it towards to the bottom. 

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

This means you want the light source shoot the light from top to make the shadow to the bottom. The reason you still see some shadow at the top is the shadow radius. which is to simulate the diffuse of the light. The more diffuse the light is, the softer the shadow will be so you will see top shadow still.

view.layer.shadowRadius = 1 or 0.5

try to reduce the radius also. it will give you a better visual result.

To understand umbra, penumbra and antumbra if you need, check out https://en.wikipedia.org/wiki/Umbra,_penumbra_and_antumbra

Related questions

What's the best way to add a drop shadow to my UIView

I am trying to add a drop shadow to views that are layered on top of one another, the views collapse allowing content in other views to be seen, in this vein i want to keep view.clipsToBounds ON so …

Read More
Creating a shadow for a UIImageView that has rounded corners?

I am trying to create an ImageView that has rounded corners and a shadow to give it some depth. I was able to create a shadow for the UIImageView, but whenever I added the code to also make it have …

Read More
How can I add shadow to a circle UIImageView or UIView?

I am trying to make a circle UIImageView, and it works. Below is the way I use to make it: [self.pic.layer setMasksToBounds:YES]; [self.pic.layer setCornerRadius:50.0]; I would like to add some shadow to the UIImageView. The …

Read More