console
<div class="container">
<div class="box shadow1">shadow1</div>
<div class="box shadow2">shadow2</div>
<div class="box shadow3">shadow3</div>
<div class="box shadow4">shadow4</div>
<div class="box shadow5">shadow5</div>
<div class="box shadow6">shadow6</div>
<div class="box shadow7">shadow7</div>
</div>
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #2ec194;
}
.container {
position: relative;
display: flex;
flex-wrap: wrap;
}
.container .box {
position: relative;
width: 300px;
height: 200px;
background: #fff;
font-family: consolas;
font-size: 2.5em;
display: flex;
align-items: center;
justify-content: center;
color: rgba(0, 0, 0, .1);
margin: 40px 10px;
}
.container .box.shadow1 {
box-shadow: -30px 30px 20px rgba(0,0,0,.3);
}
.container .box.shadow2::before {
content:'';
position: absolute;
bottom: 10px;
left: 10%;
width: 90%;
height: 50px;
background: rgba(0,0,0,.3);
transform-origin: left;
transform: skewY(5deg);
z-index: -1;
filter: blur(5px);
}
.container .box.shadow3::before{
content: '';
position: absolute;
bottom: 0px;
left: 0;
width: 50%;
height: 30px;
background: rgba(0, 0, 0, 0.3);
transform-origin: right;
transform:skewY(-8deg);
z-index: -1;
filter: blur(10px);
}
.container .box.shadow3::after{
content: '';
position: absolute;
bottom: 0px;
right: 0;
width: 50%;
height: 30px;
background: rgba(0, 0, 0, 0.3);
transform-origin: left;
transform:skewY(8deg);
z-index: -1;
filter: blur(10px);
}
.container .box.shadow4::before{
content: '';
position: absolute;
bottom: -50px;
left: 5%;
width: 90%;
height: 20px;
background: rgba(0, 0, 0, 0.3);
border-radius: 50%;
z-index: -1;
filter: blur(10px);
}
.container .box.shadow5::before{
content: '';
position: absolute;
bottom: -15%;
left: 5%;
width: 90%;
height: 90%;
background: rgba(0, 0, 0, 0.3);
z-index: -1;
filter: blur(10px);
}
.container .box.shadow6{
background: #2ec194;
border-radius: 15px;
box-shadow: -15px -15px 15px rgba(255, 255, 255, 0.2),
15px 15px 15px rgba(0, 0, 0, 0.1);
}
.container .box.shadow7{
background: #2ec194;
border-radius: 15px;
box-shadow: -15px -15px 15px rgba(255, 255, 255, 0.2),
15px 15px 15px rgba(0, 0, 0, 0.1),
inset -5px -5px 5px rgba(255, 255, 255, 0.2),
inset 5px 5px 5px rgba(0, 0, 0, 0.1);
}