Edit in JSFiddle

.box {
  width: 100%;
  height: 200px;
  border: 2px solid black;
  margin-bottom: 10px;
}

.standard-gradient {
	background-image: radial-gradient( circle, #f8f8f8 0%, #e74c3c 100% );
}
  
.cool-gradient {
	background-image: linear-gradient( 70deg, #e74c3c 50%, #f8f8f8 50% );
}

.yay-gradient {
  background-image:
		linear-gradient( 175deg, transparent 30%, #f2f2f2 0, #f2f2f2 70%, transparent 0 ),
		linear-gradient( white, white );
}

.pokemon-gradient{
  background-image:
    radial-gradient( closest-side circle, white 50%, transparent 0 ),
	  linear-gradient( 180deg, #e74c3c 50%, transparent 50% ),
    linear-gradient( 180deg, transparent 50%, #f2f2f2 50% );
}

/* https://stackoverflow.com/questions/30682806/css-is-it-possible-to-achieve-this-without-an-image */
.mindblowing-gradient {
  background-image:
    linear-gradient(60deg, #e74c3c 25%, rgba(0,0,0,0) 25%), 
    linear-gradient(350deg, #f0938a 20%, rgba(0,0,0,0) 20%), 
    linear-gradient(125deg, rgba(0,0,0,0) 70%, #ee8176 70%), 
    linear-gradient(125deg, #e95d4f 45%, rgba(0,0,0,0) 45%), 
    linear-gradient(125deg, #eb6f62 70%, rgba(0,0,0,0) 70%);
}

/* http://lea.verou.me/css3patterns/ */
.polka-pattern {
	background-image:
		radial-gradient( white 15%, transparent 16% ),
		radial-gradient( white 15%, transparent 16% ),
		linear-gradient( #e5e5e5 0, #e5e5e5 );

	background-size: 60px 60px;

	background-position:
		0 0,
		30px 30px,
		0 0;
}
  
/* http://lea.verou.me/css3patterns/ */
.chevron-pattern {
	background:
		linear-gradient(135deg, #ECEDDC 25%, transparent 25%) -25px 0,
    linear-gradient(225deg, #ECEDDC 25%, transparent 25%) -25px 0,
    linear-gradient(315deg, #ECEDDC 25%, transparent 25%),
    linear-gradient(45deg, #ECEDDC 25%, transparent 25%);	

	background-size: 50px 50px;

	background-color: white;
}

<div class="box standard-gradient"></div>

<div class="box cool-gradient"></div>

<div class="box yay-gradient"></div>

<div class="box pokemon-gradient"></div>

<div class="box mindblowing-gradient"></div>

<div class="box polka-pattern"></div>

<div class="box chevron-pattern"></div>