Как размыть правую и левую стороны контейнера прокрутки? ⇐ Html

[Anonymous]

Я пытаюсь сделать так, чтобы левая и правая стороны контейнера имели эффект размытия, используя свойство box-shadow. Контейнер (boxes) содержит поля, которые в данный момент находятся в поле зрения, так как в этом контейнере есть несколько блоков, которые можно прокручивать с помощью двух кнопок (с идентификаторами назад и вперед).
Как добавить эффект плавного размытия к краям контейнера? Дальние края не должны быть видны, а затем они должны постепенно становиться светлее.
Пример:


против моего:


html:







Why host on Airbnb?
Hosts reveal what they love about sharing their space on Airbnb.






How to get started on Airbnb
From creating your listing to prepping your space, learn how to start hosting.






How to earn money on Airbnb
Here's what every Host needs to know about pricing and payouts.






Designing your space
Designing your space for guests can be a quick way to boost your bookings.






Secrets from a seasoned Superhost
Superhost Nikki shares her tips, from setting up to standing out.




css:
.boxes-container {
margin-top: 2rem;
width: 100%;
position: relative;
}

.boxes {
display: flex;
overflow-x: scroll;
-ms-overflow-style: none;
scrollbar-width: none;
scroll-behavior: smooth;
// border: 2px solid red;
position: relative;

&::before, &::after {
content: '';
position: absolute;
top: 0;
width: 2rem;
height: 100%;
}

&::before {
box-shadow: 50px 0 50px #fff inset;
left: 0;
}

&::after {
box-shadow: -50px 0 50px #fff inset;
// box-shadow: -80px 0 #fff inset;
right: 0;
}

&::-webkit-scrollbar {display: none}

.box {
@include flexCenter(column);
align-items: flex-start;
gap: 1rem;
width: 332px;
max-width: 332px;
cursor: pointer;
margin-right: 2rem;
// background-color: green;

&#last-box {
padding-right: 2rem;
}

.img-container {

img {
width: 322px;
max-width: 322px;
height: 200px;
object-fit: cover;
border-radius: 10px;
}
}

h6 {
font-size: 18px;
}

p {
font-size: 14.5px;
font-weight: lighter;
letter-spacing: 0.1px;
}
}
}


Подробнее здесь: https://stackoverflow.com/questions/734 ... -container