CSS3 Box Shadow Fade Out Effect

css insets
Eric Bergman picture Eric Bergman · Sep 17, 2012 · Viewed 11.1k times · Source

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

Answer

Andi picture Andi · Dec 5, 2012

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/

Related questions

Create a "inset" effect using CSS in websites

I am very much impressed by the "inset" like effect in many latest websites. Some examples are and The line in the center. Nowadays, many websites use these kinds of lines/effects. I tried to achieve the same with borders …

Read More
How to feather the edges of an image using CSS

I have an unordered list containing 3 list items. Each list item has an image, and 3 divs containing text. I want the edges of the image to be feathered, by using only CSS. My site found here currenly has a feathered …

Read More
Text shadow Inset effect css3

I want the inset effect for the above button. The 'text' cancel appears to be type pressed. I have tried a lot of examples available online but they don't have white background examples. Help me to gain this effect. Thanks …

Read More