Create a curved shadow with a color gradient

Question

Here is a shadow I'm trying to replicate using only CSS, and I just can't figure out how to do this. I’ve been trying for hours. I think I need to create 2 shadow elements, but I'm not sure how to proceed. The closest I get is (a terrible attempt - I know):

.type-product:before, .type-product:after{ z-index: -1; position: absolute; content: ""; bottom: 25px; left: 21px; width: 50%; top: 80%; max-width:300px; background: #777; box-shadow: 0 35px 20px #777; transform: rotate(-8deg); } .type-product:after{ transform: rotate(8deg); right: 20px; left: auto; } 

Best score if any CSS gurus can provide any help.

NOTE. I do not think this link fully covers my problem. He just discusses the curve - for now I need a curve with a color gradient ...

Answer 1

You can do this with the pseudo-element :before and box-shadow

 div { width: 200px; height: 100px; border: 1px solid #aaa; position: relative; background: white; } div:before { content: ''; border-radius: 50%; height: 100%; width: 100%; position: absolute; z-index: -1; left: 0; transform: translateY(103%); box-shadow: 0px -54px 13px -47px #000000, -4px -45px 35px -28px #999999; } 

 <div></div> 

Answer 2

For me, it looks like something that can be achieved with a pair of elements, as shown below. A shadow is a linear-gradient over which a white circle is placed. The disadvantage of this approach is that it will only work with a solid background (because a solid color will be required for the overlaid circle).

It just doesn't look like it's possible using box-shadow , because the shadow itself seems like a gradient that goes from transparent or white on the left to black in the middle, to transparent or white again on the right.

The output is responsive and can adapt to all sizes of the parent container. Simple :hover container in the fragment to see it in action :)

 .wrapper { position: relative; height: 200px; width: 200px; overflow: hidden; } .content { height: 85%; width: 100%; border: 1px solid; } .wrapper:before { position: absolute; content: ''; bottom: 0px; left: 0px; height: 15%; width: 100%; background: linear-gradient(to right, transparent 2%, #444, transparent 98%); } .wrapper:after { position: absolute; content: ''; bottom: -186%; /* height of before - height of after - 1% buffer for the small gap */ left: -50%; height: 200%; width: 200%; border-radius: 50%; background: white; } * { box-sizing: border-box; } /* just for demo */ .wrapper { transition: all 1s; } .wrapper:hover { height: 300px; width: 400px; } 

 <div class='wrapper'> <div class='content'></div> </div> 

Answer 3

Besides the answers, this can also be a good shadow shadow for your class. (This is just a preference and looks like what you want).

 .box { width: 70%; height: 200px; background: #FFF; margin: 40px auto; } .type-product { position: relative; } .type-product:before { z-index: -1; position: absolute; content: ""; bottom: 17px; left: 10px; width: 50%; top: 70%; max-width: 300px; background: #777; box-shadow: 0 18px 20px #777; transform: rotate(-8deg); } .type-product:after { z-index: -1; position: absolute; content: ""; bottom: 17px; right: 10px; width: 50%; top: 80%; max-width: 300px; background: #777; box-shadow: 0 18px 20px #777; transform: rotate(8deg); } 

 <div class="type-product box"> </div> 

I hope you will like it.