Fake Border Gradient - Snippet

Preview
HTML
CSS
JS

<div id="container">
	<h1>Fake border gradient!</h1>
</div>

html {
	background: #eee;
}

#container {
	background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #aaaeaf), color-stop(100%, #689ecd));
	background-image: -webkit-linear-gradient(#aaaeaf, #689ecd);
	background-image: -moz-linear-gradient(#aaaeaf, #689ecd);
	background-image: -o-linear-gradient(#aaaeaf, #689ecd);
	background-image: -ms-linear-gradient(#aaaeaf, #689ecd);
	background-image: linear-gradient(#aaaeaf, #689ecd);
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	-ms-border-radius: 3px;
	-o-border-radius: 3px;
	border-radius: 3px;
	-webkit-box-shadow: 0 0 50px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 0 0 50px rgba(0, 0, 0, 0.2);
	box-shadow: 0 0 50px rgba(0, 0, 0, 0.2);
	margin: 80px auto;
	padding: 20px;
	position: relative;
	width: 150px;
}

#container * {
	position: relative;
}

h1 {
	font-size: 15px;
	text-align: center;
}

#container::before {
	background: white;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	-ms-border-radius: 2px;
	-o-border-radius: 2px;
	border-radius: 2px;
	bottom: 1px;
	content: '';
	left: 1px;
	position: absolute;
	right: 1px;
	top: 1px;
}