<div class="box-1"></div>
<div class="box0"></div>
<div class="box"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>
<div class="box6"></div>
<div class="box7"></div>
<div class="box8"></div>
<div class="box9"></div>
<div class="box10"></div>
<div class="box11"></div>
<div class="box12"></div>
[class*='box'] {
	border: 1px solid #999;
	display: inline-block;
	margin: 10px;
	height: 300px;
	width: 300px;
}

.box-1 {
	background: linear-gradient(#F28C6A 100%, #E5E5E5);
}

.box0 {
	background: linear-gradient(#F28C6A 0, #E5E5E5 100%);
	background-size: 100% 30px;
}

.box {
	background: linear-gradient(#F28C6A 50%, #E5E5E5 50%);
	background-size: 100% 30px;
}

.box2 {
	background: linear-gradient(#F28C6A 33.33%, #E5E5E5 33.33%, #E5E5E5 66.66%, #fff 0);
	background-size: 100% 30px;
}

.box3 {
	background: linear-gradient(to right, #F28C6A 25%, #fff 25%, #fff 50%, #E5E5E5 50%, #E5E5E5 75%, #fff 0);
	background-size: 30px 100%;
}

.box4 {
	background: linear-gradient(45deg, #E5E5E5 50%, #F28C6A 50%);
	background-size: 50px 50px;
}

.box5 {
	background: linear-gradient(45deg, #E5E5E5 25%, #F28C6A 0, #F28C6A 50%, #E5E5E5 0, #E5E5E5 75%, #F28C6A 0);
	background-size: 42px 42px;
}

.box6 {
	background: repeating-linear-gradient(60deg, #E5E5E5, #E5E5E5 15px, #F28C6A 0, #F28C6A 30px);
}

.box7 {
	background-color: #F28C6A;
	background-image: repeating-linear-gradient(30deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3) 15px, transparent 0, transparent 30px);
}

.box8 {	
	background-color: #F28C6A;
	background-image: linear-gradient(rgba(255, 255, 255, 0.5) 1px, transparent 0), linear-gradient(90deg, rgba(255, 255, 255, 0.5) 1px, transparent 0);
	background-size: 30px 30px;
}

.box9 {
	height: 260px;
	width: 260px;
	border: 20px solid transparent;
	background: linear-gradient(white, white) padding-box, repeating-linear-gradient(-45deg, red 0, red 12.5%, transparent 0, transparent 25%, #58a 0, #58a 37.5%, transparent 0, transparent 50%) 0 / 5em 5em;
}

@keyframes ants { to {background-position: 100%} }

.box10 {
	border: 1px solid transparent;
	background: linear-gradient(white, white) padding-box, repeating-linear-gradient(-45deg, black 0, black 25%, white 0, white 50%) 0 / .6em .6em;
	animation: ants 12s linear infinite;
}

.box11 {
	background-image: linear-gradient(rgba(red, 0.5) 50%, transparent 50%), linear-gradient(90deg, rgba(red, 0.5) 50%, transparent 50%);
	background-size: 30px 30px;
}
.box12 {
	height: 300px;
	width: 300px;
	border: 1px solid transparent;
	background: linear-gradient(white, white) padding-box, linear-gradient(to bottom, red 50%, transparent 50%), linear-gradient(to right, red 50%, transparent 50%),
		linear-gradient(to left, red 50%, transparent 50%);
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.