Ellipse Pseudo element shadow css

Question

I am trying to add shadow to my pseudo-element but in vain. Tried many articles but still not working. My code:

.ug-slick .slick-slide {
            width: 800px;
            height: 500px;
        }
        .ug-slick::after {
            content: "";
            position: absolute;
  bottom: 8px;
  right: -5%;
  left: -5%;
  height: 60px;
  width: 110%;
  background: #F2F2F2;
  -webkit-clip-path: ellipse(100% 50% at 100% 50%);
  clip-path: ellipse(70% 50% at 50% 50%);
  box-shadow: 0px 10px 5px black;
        }

<div class="ug-slick">
</div>

Please help.

Answer 1

Because of the clip-path property you are 'clipping' a part of the visuals off, including the shadow. Is the shape you have now the shape you want to achieve? maybe you could use border-radius instead of clip-path to create that shape.