<div class="boxes">
<div class="shadow1">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo quod assumenda porro blanditiis iure? Non, perspiciatis quidem. Tempore corporis sequi impedit asperiores sed architecto blanditiis rerum, exercitationem dolor harum. Id?</p>
</div>
<div class="shadow2">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo quod assumenda porro blanditiis iure? Non, perspiciatis quidem. Tempore corporis sequi impedit asperiores sed architecto blanditiis rerum, exercitationem dolor harum. Id?</p>
</div>
</div>
.shadow1 {
box-shadow: 0 0 0 3px #977, 0 0 0 6px #797, 0 0 0 9px #779;
}
.shadow2 {
box-shadow: 0 4px 0 #977, 0 8px 0 #797, 0 12px 0 #779;
}
.boxes {
max-width: 500px;
width: 600px;
margin: 30px auto;
display: flex;
flex-wrap: wrap;
gap: 15px;
div {
flex: 1;
padding: 15px;
margin: 30px 0;
background: #e4e4e4;
}
}
* {
box-sizing: border-box;
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.