Gradient box shadow

Box shadows with a gradient style

by cchana

HTML

<div class="container">
	<div class="shadow">
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tempus gravida ligula, vel sodales ipsum sollicitudin eu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam dapibus dui sit amet aliquet congue. Praesent dolor justo, rutrum blandit turpis a, tempus facilisis dui. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam a tortor eu nunc cursus aliquet et vitae nisi. Nam imperdiet urna pretium massa facilisis, quis egestas quam feugiat. Integer fringilla suscipit mollis. Curabitur egestas magna eget posuere varius. Sed id porttitor elit. Nulla sodales nulla diam, vitae tempus sem accumsan sed. Ut cursus ante lorem, lacinia convallis mauris bibendum eget. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla eros ex, volutpat et feugiat viverra, convallis vitae turpis. Ut vitae tristique est, in fermentum justo.</p>
	</div>

	<div class="shadow">
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tempus gravida ligula, vel sodales ipsum sollicitudin eu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam dapibus dui sit amet aliquet congue. Praesent dolor justo, rutrum blandit turpis a, tempus facilisis dui. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam a tortor eu nunc cursus aliquet et vitae nisi. Nam imperdiet urna pretium massa facilisis, quis egestas quam feugiat. Integer fringilla suscipit mollis. Curabitur egestas magna eget posuere varius. Sed id porttitor elit. Nulla sodales nulla diam, vitae tempus sem accumsan sed. Ut cursus ante lorem, lacinia convallis mauris bibendum eget. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla eros ex, volutpat et feugiat viverra, convallis vitae turpis. Ut vitae tristique est, in...

CSS

body {
	background-color: #FFF;	
}
.container {
	display: flex;
	justify-content: space-around;
}
.shadow {
	background-color: #FFF;
	border-radius: 10px;
	margin: 20px;
	padding: 10px;
	position: relative;
	width: 40%;
}

.shadow:before {
	background: linear-gradient(to bottom, #000000 0%,#F50 100%);
	box-shadow: inset 0 0 20px 15px #FFF;
	content: '';
	height: calc(100% + 20px);
	left: -10px;
	position: absolute;
	top: -10px;
	width: calc(100% + 20px);
	z-index: -1;
}

.shadow:first-child:before {
	background: linear-gradient(to bottom, #000000 0%,#F50 100%);
}

.shadow:last-child:before {
	background: linear-gradient(to bottom, #FFF 50%,#000 100%);
}

p {
	margin: 0;
	padding: 0;
}