Вы можете приблизить это, используя псевдоэлемент, градиент и некоторый фильтр.
Играйте с разными значениями, пока не получите то, что вы хотите:
body {
background:pink;
margin:0;
padding-bottom:100px;
}
.container {
padding:20px;
background:#e4a8b3;
position:relative;
z-index:-1;
}
.box {
background:white;
width:200px;
height:300px;
margin:0 auto -50px;
border:1px solid grey;
position:relative;
}
/* Relevant code start here */
.box:before,
.box:after {
content:"";
position:absolute;
z-index:-1;
right:98%;
width:70px;
filter:blur(4px);
}
.box:before {
bottom:30px;
top:0;
background:
linear-gradient(to bottom right,transparent 45%,rgba(0, 0, 0, 0.4) 70%)
bottom / 100% 115%;
}
.box:after {
height:32px;
bottom:0;
background:
linear-gradient(to top right,transparent 45%,rgba(0, 0, 0, 0.4) 70%)
top / 100% 115%;
}
/**/
<div class="container">
<div class="box"></div>
</div>
Вы можете оптимизировать код для использования только одного псевдоэлемента:
body {
background:pink;
margin:0;
padding-bottom:100px;
}
.container {
padding:20px;
background:#e4a8b3;
position:relative;
z-index:-1;
}
.box {
background:white;
width:200px;
height:300px;
margin:0 auto -50px;
border:1px solid grey;
position:relative;
}
/* Relevant code start here */
.box:before {
content:"";
position:absolute;
z-index:-1;
right:98%;
width:70px;
top:0;
bottom:0;
filter:blur(4px);
background:
linear-gradient(to top right,transparent 45%,rgba(0, 0, 0, 0.4) 70%)
bottom -10px center / 100% calc(30px + 10px),
linear-gradient(to bottom right,transparent 45%,rgba(0, 0, 0, 0.4) 70%)
top -20px center / 100% calc(100% - 30px + 20px);
background-repeat:no-repeat;
}
/**/
<div class="container">
<div class="box"></div>
</div>