How can I make an image have a box-shadow on 3 sides (top, right, and left) and also have a fade to white on the bottom using CSS?

Question

I am trying to use CSS linear-gradient and box-shadow to make an image have a box-shadow on 3 sides (top, right, and left) while also having a "fade-to-white" on the bottom edge of the image. I don't want the image url in the CSS, I want to use the img tag in the html. This is what I have so far: https://codepen.io/adelelanders/pen/rNVMxZw however the bottom edge is still showing the box-shadow (dark line). I want the bottom edge to fade to white.

img {
  max-width: 100%;
}

.image-container {
  max-width: 100%;
  width: 600px;
}

.white-fade::after {
  display: block;
  position: relative;
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0, #fff 100%);
  margin-top: -150px;
  height: 150px;
  width: 100%;
  content: '';
}

.box-shadow {
  border-radius: 5px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}

<div class="image-container white-fade">
  <img class="box-shadow" src="https://cdn.pixabay.com/photo/2019/03/18/06/46/cyber-4062449__340.jpg" />
</div>

instead dropping the shadow ,you could lift it up `box-shadow: 0 -20px 20px rgba(0,0,0,0.19), 0 -6px 6px rgba(0,0,0,0.23);` — G-Cyrillus, Feb 19 '20 at 18:47
If I lift the box-shadow up, it makes the top edge box-shadow darker and thicker than the right/left sides. — A. Landers, Feb 19 '20 at 18:56
then use also a pseudo element for that one too . use position absolute to set them instead negative margins ;) — G-Cyrillus, Feb 19 '20 at 18:58
hmm I don't think I understand, could you show me in the code pen? — A. Landers, Feb 19 '20 at 19:04
here is the idea https://codepen.io/gc-nomade/pen/eYNdZBM ;) — G-Cyrillus, Feb 19 '20 at 19:13
Related; canonical duplicate of the first part [Creating a CSS3 box-shadow on all sides but one](https://stackoverflow.com/questions/1429605/creating-a-css3-box-shadow-on-all-sides-but-one) — TylerH, Feb 19 '20 at 19:13
@TylerH it's a comment from the accepted answer ... which needs it to work, the op did not update it's answer . the question itself is missing a link to the original issue. it's a bad choice for a duplicate to my point of view. question is obsolete from the code /link showing the issue and answer is incomplete unless you read the comments ... ;) It surely does not help A.Landers here — G-Cyrillus, Feb 19 '20 at 19:29
@G-Cyr Ah, well, there are myriad answers there that don't use overflow (and plenty of linked alternatives, too :-)) At any rate, I only linked it and didn't close as it would only address part of the question, anyway. — TylerH, Feb 19 '20 at 19:31

Temani Afif · Answer 1 · 2020-02-19T19:21:56.177

consider mask instead of gradient

img {
  max-width: 100%;
}

.image-container {
  max-width: 100%;
  width: 600px;
  padding:20px; /* Some padding for the shadow */
  -webkit-mask: 
    linear-gradient(#fff,#fff)        top/100% calc(100% - 149px) no-repeat,
    linear-gradient(#fff,transparent) bottom/100% 150px           no-repeat;
  mask: 
    linear-gradient(#fff,#fff)        top/100% calc(100% - 149px) no-repeat,
    linear-gradient(#fff,transparent) bottom/100% 150px           no-repeat;
}

.box-shadow {
  border-radius: 5px;
  display:block;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 1), 0 6px 6px rgba(0, 0, 0, 1);
}

<div class="image-container white-fade">
  <img class="box-shadow" src="https://cdn.pixabay.com/photo/2019/03/18/06/46/cyber-4062449__340.jpg" />
</div>

How can I make an image have a box-shadow on 3 sides (top, right, and left) and also have a fade to white on the bottom using CSS?

1 Answers1