<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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.