div {
  width: 300px;
  height: 200px;
}
.grad1 {
background:
	radial-gradient(
		circle at bottom left,
		transparent 0,
		transparent 2em,
		beige 2em,
		beige 4em,
		transparent 4em,
		transparent 6em,
		khaki 6em,
		khaki 8em,
		transparent 8em,
		transparent 10em
	),
	radial-gradient(
		circle at top right,
		transparent 0,
		transparent 2em,
		beige 2em,
		beige 4em,
		transparent 4em,
		transparent 6em,
		khaki 6em,
		khaki 8em,
		transparent 8em,
		transparent 10em
	),
	radial-gradient(
		circle at top left,
		transparent 0,
		transparent 2em,
		navajowhite 2em,
		navajowhite 4em,
		transparent 4em,
		transparent 6em,
		peachpuff 6em,
		peachpuff 8em,
		transparent 8em,
		transparent 10em
	),
	radial-gradient(
		circle at bottom right,
		transparent 0,
		transparent 2em,
		palegoldenrod 2em,
		palegoldenrod 4em,
		transparent 4em,
		transparent 6em,
		peachpuff 6em,
		peachpuff 8em,
		transparent 8em,
		transparent 10em
	), blanchedalmond;
	
background-blend-mode: multiply;
background-size: 10em 10em;
background-position: 0 0, 0 0, 5em 5em, 5em 5em;
}

.grad2 {
  background:
	linear-gradient(
		crimson -7.5%,
		crimson 2.5%,
		orangered -5%,
		orangered 5%,
		orange -2.5%,
		orange 7.5%,
		gold 0%,
		gold 10%,
		#fff 2.5%,
		#fff 12.5%,
		lightblue 5%,
		lightblue 15%,
		skyblue 7.5%,
		skyblue 17.5%,
		steelblue 10%,
		steelblue 20%,
		#38678f 12.5%,
		#38678f 22.5%,
		skyblue 15%,
		skyblue 25%,
		#38678f 17.5%,
		#38678f 27.5%,
		steelblue 20%,
		steelblue 30%,
		skyblue 22.5%,
		skyblue 32.5%,
		lightblue 25%,
		lightblue 35%,
		#fff 27.5%,
		white 37.5%,
		gold 30%,
		gold 40%,
		orange 32.5%,
		orange 42.5%,
		orangered 35%,
		orangered 45%,
		crimson 37.5%,
		crimson 47.5%,
		gold 40%,
		gold 50%,
		crimson 42.5%,
		crimson 52.5%,
		orangered 45%,
		orangered 55%,
		orange 47.5%,
		orange 57.5%,
		gold 50%,
		gold 60%,
		#fff 52.5%,
		#fff 62.5%,
		lightblue 55%,
		lightblue 65%,
		skyblue 57.5%,
		skyblue 67.5%,
		steelblue 60%,
		steelblue 70%,
		#38678f 62.5%,
		#38678f 72.5%,
		skyblue 65%,
		skyblue 75%,
		#38678f 67.5%,
		#38678f 77.5%,
		steelblue 70%,
		steelblue 80%,
		skyblue 72.5%,
		skyblue 82.5%,
		lightblue 75%,
		lightblue 85%,
		#fff 77.5%,
		#fff 87.5%,
		gold 80%,
		gold 90%,
		orange 82.5%,
		orange 92.5%,
		orangered 85%,
		orangered 95%,
		crimson 87.5%,
		crimson 97.5%,
		gold 90%,
		gold 100%),
	linear-gradient(
		90deg,
		crimson -7.5%,
		crimson 2.5%,
		orangered -5%,
		orangered 5%,
		orange -2.5%,
		orange 7.5%,
		gold 0%,
		gold 10%,
		#fff 2.5%,
		#fff 12.5%,
		lightblue 5%,
		lightblue 15%,
		skyblue 7.5%,
		skyblue 17.5%,
		steelblue 10%,
		steelblue 20%,
		#38678f 12.5%,
		#38678f 22.5%,
		skyblue 15%,
		skyblue 25%,
		#38678f 17.5%,
		#38678f 27.5%,
		steelblue 20%,
		steelblue 30%,
		skyblue 22.5%,
		skyblue 32.5%,
		lightblue 25%,
		lightblue 35%,
		#fff 27.5%,
		#fff 37.5%,
		gold 30%,
		gold 40%,
		orange 32.5%,
		orange 42.5%,
		orangered 35%,
		orangered 45%,
		crimson 37.5%,
		crimson 47.5%,
		gold 40%,
		gold 50%,
		crimson 42.5%,
		crimson 52.5%,
		orangered 45%,
		orangered 55%,
		orange 47.5%,
		orange 57.5%,
		gold 50%,
		gold 60%,
		#fff 52.5%,
		#fff 62.5%,
		lightblue 55%,
		lightblue 65%,
		skyblue 57.5%,
		skyblue 67.5%,
		steelblue 60%,
		steelblue 70%,
		#38678f 62.5%,
		#38678f 72.5%,
		skyblue 65%,
		skyblue 75%,
		#38678f 67.5%,
		#38678f 77.5%,
		steelblue 70%,
		steelblue 80%,
		skyblue 72.5%,
		skyblue 82.5%,
		lightblue 75%,
		lightblue 85%,
		#fff 77.5%,
		#fff 87.5%,
		gold 80%,
		gold 90%,
		orange 82.5%,
		orange 92.5%,
		orangered 85%,
		orangered 95%,
		crimson 87.5%,
		crimson 97.5%,
		gold 90%,
		gold 100%
	), orangered;

background-size: 10em 10em;
background-blend-mode: multiply, normal;
}

.grad3 {
  background:
	radial-gradient(
		transparent 0,
		transparent 2em,
		lightblue 2em,
		lightblue 2.5em,
		transparent 2.5em,
		transparent 100%
	),
	radial-gradient(
		transparent 0,
		transparent 2em,
		aquamarine 2em,
		aquamarine 2.5em,
		transparent 2.5em,
		transparent 100%
	),
	radial-gradient(
		transparent 0,
		transparent 2em,
		khaki 2em,
		khaki 2.5em,
		transparent 2.5em,
		transparent 100%
	),
	radial-gradient(
		transparent 0,
		transparent 2em,
		pink 2em,
		pink 2.5em,
		transparent 2.5em,
		transparent 100%
	), linen;


background-blend-mode: multiply;
background-size: 5em 5em;
background-position:
	0 2.5em,
	2.5em 0,
	2.5em 2.5em,
	0 0;
}

.grad4 {
  background:
	radial-gradient(
		rgba(255,255,255,.2) 20%,
		rgba(128,0,128,.4) 31%,
		rgba(128,0,128,.4) 35%,
		rgba(255,255,255,.2) 36%,
		rgba(255,255,255,.2) 40%,
		rgba(128,0,128,.4) 51%,
		rgba(128,0,128,.4) 55%,
		rgba(255,255,255,.2) 56%),
	radial-gradient(
		rgba(255,255,255,.2) 20%,
		rgba(0,0,139,.4) 31%,
		rgba(0,0,139,.4) 35%,
		rgba(255,255,255,.2) 36%,
		rgba(255,255,255,.2) 40%,
		rgba(0,0,139,.4) 51%,
		rgba(0,0,139,.4) 55%,
		rgba(255,255,255,.2) 56%),
	radial-gradient(
		rgba(255,255,255,.2) 20%,
		rgba(220,20,60,.4) 31%,
		rgba(220,20,60,.4) 35%,
		rgba(255,255,255,.2) 36%,
		rgba(255,255,255,.2) 40%,
		rgba(220,20,60,.4) 51%,
		rgba(220,20,60,.4) 55%,
		rgba(255,255,255,.2) 56%),
	radial-gradient(
		rgba(255,255,255,.2) 20%,
		rgba(255,69,0,.4) 31%,
		rgba(255,69,0,.4) 35%,
		rgba(255,255,255,.2) 36%,
		rgba(255,255,255,.2) 40%,
		rgba(255,69,0,.4) 51%,
		rgba(255,69,0,.4) 55%,
		rgba(255,255,255,.2) 56%),
	radial-gradient(
		rgba(255,255,255,.2) 20%,
		rgba(255,215,0,.4) 31%,
		rgba(255,215,0,.4) 35%,
		rgba(255,255,255,.2) 36%,
		rgba(255,255,255,.2) 40%,
		rgba(255,215,0,.4) 51%,
		rgba(255,215,0,.4) 55%,
		rgba(255,255,255,.2) 56%),
	radial-gradient(
		rgba(255,255,255,.2) 20%,
		rgba(154,205,50,.4) 31%,
		rgba(154,205,50,.4) 35%,
		rgba(255,255,255,.2) 36%,
		rgba(255,255,255,.2) 40%,
		rgba(154,205,50,.4) 51%,
		rgba(154,205,50,.4) 55%,
		rgba(255,255,255,.2) 56%),
	radial-gradient(
		rgba(255,255,255,.2) 20%,
		rgba(70,130,180,.4) 31%,
		rgba(70,130,180,.4) 35%,
		rgba(255,255,255,.2) 36%,
		rgba(255,255,255,.2) 40%,
		rgba(70,130,180,.4) 51%,
		rgba(70,130,180,.4) 55%,
		rgba(255,255,255,.2) 56%
	), orangered;

	background-size:
		13em 13em,
		11em 11em,
		5em 5em,
		11em 11em,
		7em 7em,
		5em 5em,
		3em 3em,
		1em 1em;
	background-position:
		50% 50%,
		20% 20%,
		30% 30%,
		70% 70%;
	background-blend-mode:
		overlay,
		normal,
		hard-light,
		overlay,
		multiply,
		soft-light;
}

}