CODEWITHSUNDEEP
css
Steven Wu
Steven Wu

Reputation: 293

How to create a light oval-shaped CSS3 shadow

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

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 tips be helpful

Upvotes: 3

Views: 13429

Answers (4)

Shailender Arora
Shailender Arora

Reputation: 7778

hi you can create oval shaped css3 shadow through border-radius & box-shadow....

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

Upvotes: 1

quatermain
quatermain

Reputation: 1452

Something like this? enter image description here

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

note about parameters: CSS3's Box-Shadow Adds Drop Shadows, Inner Shadows

Upvotes: 2

martinjlowm
martinjlowm

Reputation: 871

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

http://dabblet.com/gist/2225507

Upvotes: 13

p0rter
p0rter

Reputation: 989

you can play around with box-shadow and gradients here

css3 gen

but i don't think you can apply fading on the shadow

Upvotes: 0

Related Questions