A screenshot of CSS stripes, plaids and checks examples

There are many variants on the CSS3 gradient technique that we discussed in the previous article. At the simplest level, you could overlay a gradient with the "fade" effect of another gradient on top:

45° Stripe With Fade

body {
	margin: 0;
	background-color: #000;
	background-image: linear-gradient(
		to bottom,
		rgba(0, 0, 0, 0),
		rgba(0, 0, 0, 1) 50%),
	repeating-linear-gradient(
		45deg,
		rgba(0, 238, 170, 0.5), 
		rgba(0, 238, 170, 0.5) 12px,
		rgba(0, 0, 0, 0) 12px,
		rgba(0, 0, 0, 0) 15px
		);
		background-size: cover, 22px 22px;
}

By playing around with angles, background size, position and stops, it's possible to produce a wide variety of patterns:

Sawtooth

body {
	background-image:
		linear-gradient(
			45deg,
			#500 0%, 
			#500 50%, 
			#300 50%, 
			#300 100%
			);
	background-size: 50px 100px;
}

Blueprint

body { 
	background-color:#269;
	background-image: 
		linear-gradient(
			white 2px,
			transparent 2px
			),
		linear-gradient(
			0,
			white 2px,
			transparent 2px
			),
		linear-gradient(
			rgba(255,255,255,.3) 1px, 
			transparent 1px
			),
		linear-gradient(
			0,
			rgba(255,255,255,.3) 1px,
			transparent 1px
			);
}