Clever Geek Handbook

How to create a light CSS3 oval shadow shape

I know how to use CSS3 shadows. However, I am trying to achieve a specific design. I want the shadow to be much lighter and fade out on the left and right edges, please see the attached image.

Shadow design

The only code I have come up with is the following. But not sure how to make the edges fade out more.

 .shadow {box-shadow: 0 10px 6px -6px #000000;}

Any advice would be helpful

+3


source to share


4 answers


I am using a combination of box-shadow, border-radius and clip.



http://dabblet.com/gist/2225507

+13


source


Something like that? enter image description here

box-shadow: 0px 20px 37px -28px # 000000;



check options: CSS3 Box-Shadow Adds drop shadows for shadows, inner shadows

+2


source


hi you can create an oval shape css3 shadow via border-radius and box-shadow ....

or you can see a live demo: - http://jsbin.com/elacen/5/edit

+1


source


you can play with shadow and gradients here

css3 gen

but i dont think you can apply fade in shadow

0


source






More articles:


All Articles