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

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.