Drop shadow on a circular image

Hello!

Trying to create a drop shadow on a circular image(logo), but it’s only giving me the box image shadow, not quite what I need, any suggestions? Thanks in advance

https://webflow.com/design/whatsthescoop

You will not be able to create a circular css shadow attached to the image because by default all images are squares. But if you were to provide your read-only link it can be possible to think of a solution!

Hello @The5W,

I’d suggest setting the border radius of your image to 100% and then applying your drop-shadow/box-shadow this should give you a circular drop-shadow :slight_smile:

10

1 Like

well, I am trying to make a ball shadow as well and I’m not getting the result I wanted at all. I have the border on the image showing very hard.

Is it possible the balls aren’t perfect circles? Also, perhaps you need to make those ball images backgrounds to a circle shape then make sure the placement is centered and filled to take up full space.

1 Like

The balls are perfectly round for sure,
The problem i have is that all the balls are in a collection list and i cant have a background image for each ball.

Got it. Can you have a group? Balls as transparent PNGs with a shadow (PNG?) behind it? The PNGs will be larger file sizes, but that should theoretically work.

Thank you robertt8!! It worked very good!! Loved your advice!!

1 Like