Is it possible to create this elliptical shadow using css?

Question

I was wondering if it is possible to create following shadow in using CSS.I tried adding box-shadow but it adds shadow to box not something like in the following image. I also tried it using pseudo elements but didn't find any way to make it elliptical. I want to know if this is possible using CSS or I just have to use transparent image for shadow.

Answer 1

Here is something I just made that resembles the shadow part. You need to add rules for other browsers if you want to make it work on non-webkit. The basic idea is to use border-radius to create a circle, then shrink it in y-direction using scale and finally blur it.

http://jsfiddle.net/L4QDs/1/

#shadow {
    border-radius: 50%;
    width: 100px;
    height: 100px;
    background: black;
    opacity: 0.5;
    -webkit-filter: blur(10px);
    -webkit-transform: scale(1, 0.2);
}

Answer 2

You can create it with a pseudo element

CSS

#base {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: blue;
    position: relative;
}

#base:after {
    content: '';
    position: absolute;
    bottom: 0%;
    left: 5%;
    width: 90%;
    height: 8%;
    border-radius: 50%;
    box-shadow: 0px 10px 5px black;
}

fiddle