[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%);
}