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


source to share

4 answers

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



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



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

or you can see a live demo: -



you can play with shadow and gradients here

css3 gen

but i dont think you can apply fade in shadow



All Articles