Creating a curved shadow with a color gradient

Question

Here is a shadow that I am trying to replicate using just CSS and I just cannot work out how to do it. I have spent hours trying. I think I need to create 2 shadow elements but I'm not sure how to proceed.
The closest thing I get is with this (an abysmal 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;
}

Most appreciative if any CSS gurus could provide any help.

NOTE: I don't think that this link covers my problem fully. It just discusses the curve - whilst I need a curve with a color-gradient...

Answer 1

To me that looks like something that can be achieved using a couple of elements like shown below. The shadow is actually a linear-gradient on top of which a white circle is placed. The drawback of this approach is that it would work only with a solid background (because the circle that is overlayed would need a solid color).

That just doesn't look like it could be possible using a box-shadow because the shadow itself seems like a gradient which 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 itself to all dimensions of the parent container. Just :hover the container in the snippet 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 2

You can do this with :before pseudo element 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 3

Aside from the answers, this could also be a good box shadow for your class as well. (This is just preference & similar to 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>

Hope you like it.