CODEWITHSUNDEEP
htmlcssimageshadow
Human
Human

Reputation: 565

css create rounded shadow under a square image

Is there a way to create a rounded shadow effect underneath a square image such as the one in the image?

I was also looking at this website which says that this sort of effect is possible, but their description of the code implementation is really ambiguous.

enter image description here

Upvotes: 2

Views: 10550

Answers (1)

Human
Human

Reputation: 565

I think I figured it out. I basically used the spread property of the Box Shadow to shrink its width smaller than the element which it was associated with. It is the fourth px element in this code:

box-shadow: 0px 30px 40px -25px rgba(0, 0, 0, 1);

I then moved the shadow down vertically until I was happy with how much shadow it was showing.

Demo Here

Upvotes: 8

Related Questions