Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS3 Box Shadow Fade Out Effect

Tags:

css

insets

Is it possible to achieve a Fadeout effect with CSS3 Box Shadow?

Here's what I have so far This only adds inset/inner shadow to the vertical sides but I need to achieve a fade out effect at the top.

-moz-box-shadow: inset 5px 0 7px -5px #a4a4a4, inset -5px 0 7px -5px #a4a4a4;
-webkit-box-shadow: inset 5px 0 5px -5px #a4a4a4, inset -5px 0 5px -5px #a4a4a4;
box-shadow: inset 5px 0 7px -5px #a4a4a4, inset -5px 0 7px -5px #a4a4a4;

See the image below to see the Expected Results and what I currently have.

Expected and Current Results

like image 446
Eric Bergman Avatar asked Oct 07 '22 15:10

Eric Bergman


1 Answers

I also needed something like that:

Basically it is about giving the outer div a drop-shadow and placing the inner div with position:relativ to the outer div with a gradient from transparent to the needed background color:

http://jsfiddle.net/vBuxt/1/

like image 141
Andi Avatar answered Oct 10 '22 01:10

Andi