CSS3 Box Shadow Fade Out Effect

Question

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

use `:before` for it and if it on same plane then rotate it by `90 deg` in `y-axis` — Arpit Srivastava, Sep 17 '12 at 03:41
@Arpit Srivastava I know what the :before psuedo element is used for but I don't understand what are you trying to tell me, how exactly does this achieve a fade out effect? — Eric Bergman, Sep 17 '12 at 04:01
fadeout can be done by decrease it's `opacity` or use `shadow` as `rgb(color,color,color,opacity)` — Arpit Srivastava, Sep 17 '12 at 04:05
@joshnh The question hasn't been answered yet that's why I didn't' mark any answer, your solution seems interesting but it only works with webkit and that is not a good solution but thanks for the suggestion, it may help someone. — Eric Bergman, Oct 18 '12 at 05:02

score 3 · Answer 1 · answered Dec 05 '12 at 15:50

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/

Byron · Answer 2 · 2015-08-11T13:47:43.090

Here is a codepen example of how I tackled this for a project I worked on recently:

http://codepen.io/byronj/pen/waOxqM

I added a box-shadow to my main content section. I then added a absolute positioned div at the bottom of my content section that contains a CSS gradient with the content background color on one end and a transparent background on the other end as seen below:

.container {
   width: 1024px;
   margin: 0 auto;
 }

.container article {
   background-color: #fff;
   margin: -6em auto 10em auto;
   padding-top: 2em;
   width: 100%;
   box-shadow: 0px -2px 20px 2px rgba(0, 0, 0, 0.4);
}

/** GRADIENT **/
.bottom-gradient {
   position: absolute;
   width: 115%;
   height: 60%;
   z-index: 1;
   bottom: -20px;
   background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.59) 10%, white 50%, white 100%);
}

To ensure the content is not covered up by the gradient, I set my "p" elements to position:relative with a z-index of 2, as seen below:

p {
  padding: 1em 3em;
  position: relative;
  z-index: 2;
  margin: 1em auto;
  font-size: 1.3em;
  line-height: 1.5em;
}

For Eric's situation, you would inverse this effect by placing the gradient at the top of the element containing the box-shadow.

Hope this helps.

Jamie Paterson · Answer 3 · 2012-09-28T09:06:20.880

You can not transition CSS3 styles that contain multiple values -:

You CAN transition from say one color to another in CSS3 but you can NOT transition between gradiens in CSS3 as it gets confused with the multiple values, it will be the same with your multiple shadow values also.

Ah, I think I see what you are trying to achieve. A solution maybe would be to try and reproduce the look you are after without using Shadows - A link below shows a possible solution using borders instead of shadows, see what you think. http://css-tricks.com/examples/GradientBorder/

CSS3 Box Shadow Fade Out Effect

3 Answers3