To achieve this effect, using a box shadow with an inset is recommended as it is widely supported by most browsers. Additionally, you can add border-top-right-radius and border-bottom-right-radius to give the corners a curve.
.grey-box {
background: #ccc;
height: 200px;
width: 200px
}
.right-curve-shadow {
box-shadow: inset -20px 0 15px -15px rgba(50, 50, 50, 0.5);
}
.right-side-radius {
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
<div class="grey-box right-curve-shadow right-side-radius">
</div>
You have the flexibility to adjust the color (rgba(50, 50, 50, 0.5)) and play around with the offsets/spread of the box shadow to customize the look further.
For more details and insights on creating an inset box shadow only on one side, check out this resource:
How to create an inset box-shadow only on one side?