CODEWITHSUNDEEP
cssinsets
Eric Bergman
Eric Bergman

Reputation: 1443

CSS3 Box Shadow Fade Out Effect

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

Upvotes: 5

Views: 19520

Answers (3)

Byron
Byron

Reputation: 623

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.

Upvotes: 2

Andi
Andi

Reputation: 311

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/

Upvotes: 3

Jamie Paterson
Jamie Paterson

Reputation: 446

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/

Upvotes: 0

Related Questions