Я пытаюсь использовать линейный градиент CSS и тень от блока, чтобы у изображения была тень блока с 3-х сторон (вверху, справа и слева), а также "исчезать на белый" на нижний край изображения. Я не хочу URL изображения в CSS, я хочу использовать тег img в html. Это то, что у меня пока есть: https://codepen.io/adelelanders/pen/rNVMxZw, однако нижний край все еще показывает тень блока (темная линия). Я хочу, чтобы нижний край стал белым.
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>