How to make an elliptical inner shadow using CSS?

Question

I need an elliptical inner shadow. It must fade to complete transparency on the left and right edges.

So far, I could only achieve the following. It no longer looks like an ellipse.

#someDiv { background: -moz-radial-gradient( 50% 0%, ellipse farthest-corner, rgba(255,0,0,1) 0%, rgba(255,0,0,0.00) 70% ); border: 3px solid black; width: 30em; height: 20em; } 

Answer 1

replace ellipse farthest-corner with something like 70% 20% and adjust from there.

edit: http://jsfiddle.net/ufLYQ/

Answer 2

This is pretty close to what you need:

I would use the new style syntax for mozilla: -moz-radial gradient (center -10px, ellipse far side, # ab0000, #ffffff 100%);

And something like this old-style syntax for webkit: -webkit-gradient (radial, 325 -530, 600, 265 -235, 200, from (white) to (white), the color stop signal (.8, red ), color stop (.9, red))

This will require some customization.

Answer 3

Use this code for an elegant elliptical shadow.

 <div class="box shadow-arch-center"></div> .box { background-color: #9C9369; width: 200px; height: 50px; margin: 50px auto; } .shadow-arch-center { position: relative; } .shadow-arch-center:before, .shadow-arch-center:after { position: absolute; content: ""; bottom: 10px; z-index: -10; } .shadow-arch-center:before { left: 2%; right: 65%; /* as box-shadows get smaller, opacities increase */ box-shadow: 80px 0px 20px 22px hsla(0, 0%, 0%, .01), 70px 0px 20px 20px hsla(0, 0%, 0%, .02), 60px 0px 20px 18px hsla(0, 0%, 0%, .04), 50px 0px 20px 16px hsla(0, 0%, 0%, .08), 40px 0px 20px 14px hsla(0, 0%, 0%, .16), 30px 0px 20px 12px hsla(0, 0%, 0%, .16), 20px 0px 20px 10px hsla(0, 0%, 0%, .25), 10px 0px 20px 2px hsla(0, 0%, 0%, .5), 0 0 20px 2px hsla(0, 0%, 0%, 1); transform: skewY(5deg); } .shadow-arch-center:after{ left: 65%; right: 2%; /* as box-shadows get smaller, opacities increase */ box-shadow: -80px 0px 20px 22px hsla(0, 0%, 0%, .01), -70px 0px 20px 20px hsla(0, 0%, 0%, .02), -60px 0px 20px 18px hsla(0, 0%, 0%, .04), -50px 0px 20px 16px hsla(0, 0%, 0%, .08), -40px 0px 20px 14px hsla(0, 0%, 0%, .16), -30px 0px 20px 12px hsla(0, 0%, 0%, .16), -20px 0px 20px 10px hsla(0, 0%, 0%, .25), -10px 0px 20px 2px hsla(0, 0%, 0%, .5), 0 0 20px 2px hsla(0, 0%, 0%, 1); transform: skewY(-5deg); }