Designers tend to think of gradients as smooth distributions of color between two or more hues: black to white with shades of grey between.  But by using color stops that are very close to each other, we can make these transitions far more abrupt in CSS, and provide an easier, more dynamic, smaller (in terms of file size) and faster method for creating backgrounds without images.

body {
	background: linear-gradient(
		top,
		#aebcbf 0%,
		#6e7774 50%,
		#0a0e0a 51%,
		#0a0809 100%
		);
}

The CSS above produces the effect shown to the right. There are, however, two problems. Because the background does not have a set size and we have not specified that it repeats, the gradient will default to repeating at intervals of however high the body content is. Even with the body set to min-height: 100%,you would only see the background gradient once. Also, the transition between colors on the edges of the gradient is a little smooth: we want a sharp discontinuity. The solution for the first problem is simple: set a background-size of however large you want a single “tile” of the gradient to be:

body {
	background: linear-gradient(
		top,
		#aebcbf 0%,
		#6e7774 50%,
		#0a0e0a 51%,
		#0a0809 100%
		);
		background-size: 100px 100px;
}

The second is to place the points at which the colours in the gradient transition directly on top of each other. Here I’ll use shades of red as contrasting colours, while reducing the size of the tiles:

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

Creating a plaid pattern is simply a case of using multiple backgrounds: placing one gradient horizontal and the other vertical, and using rgba values and transparency to allow parts of the first background to show through the second:

body {
	background-color: #800;
	background-image:
		linear-gradient(
			rgba(253, 153, 0, 0.5) 0%,
			rgba(253, 153, 0, 0.5) 50%,
			rgba(253, 153, 0, 0.7) 50%,
			rgba(253, 153, 0, 0.7) 100%
			),
		linear-gradient(
			left,
			rgba(253, 153, 0, 0.5) 0%,
			rgba(253, 153, 0, 0.5) 50%,
			rgba(253, 153, 0, 0.7) 50%,
			rgba(253, 153, 0, 0.7) 100%
			);
			background-size: 100px 100px;
}

Unlike images, gradients can be placed on an angle in a background with CSS:

body {
	background-color: #800;
	background-image:
		linear-gradient(
			45deg,
			rgba(0, 0, 0, 0.5) 0%,
			rgba(0, 0, 0, 0.5) 50%,
			rgba(0, 0, 0, 0) 50%,
			rgba(0, 0, 0, 0) 100%
		);
}

Due to the lack of background-size, we’re seeing an enormous single “tile” of red and dark red at a 45deg angle. Try adding the background-size property to the declaration: it will not lead to the result you might expect.

To make it clearer, we’ll explicitly tell the browser that we are repeating the background gradient:

body {
	background-color: #800;
	background-image:
		repeating-linear-gradient(
			-45deg,
			rgba(0, 0, 0, 0.5),
			rgba(0, 0, 0, 0.5) 12px,
			rgba(0, 0, 0, 0) 12px,
			rgba(0, 0, 0, 0) 15px
			);
	background-size: 22px 22px;
}

Playing around with these values can produce unique and unexpected results, which I explore in greater depth in the next entry.

Props for discovering this trick should go to Lea Verou, who provides many more examples.

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