Linear Gradient

by Spencer Smith

HTML

<div class="gradient">
  <div id="top" class="solid"></div>
  <div id="bottom" class="solid"></div>
</div>

SCSS

$slack: #CF245E;

//////////////////
$top: $slack;
$bottom: coral;
//////////////////

$solid-dim: 200px;
$border: 15px;

*{margin: 0;}
div.gradient{
	position: absolute;
	right: 0; left: 0;
	background: linear-gradient($top, $bottom);
	margin: $border;
}
div.solid{
	float: left;
	width: $solid-dim;
	height: $solid-dim;
	clear: both;
	border-right: $border solid whitesmoke;
}
#top{
	background-color: $top;
}
#bottom{
	background-color: $bottom;
}