CSS3 Gradient Stripes


When you give a gradient two successive color-stops with the same stop value, the transition between the two is a visible line instead of smooth, gradual change. It’s technically a gradient, but there’s no seamless transition between the colors. Its best to use percentages to determine the position of the color changes, then the stripe width can be set relative to ‘background-size’ which should then be repeated.

/* Horizontal 10px red and blue stripes */
.horizontal{
	background-image: -webkit-linear-gradient(red 50%, #ccc blue 50%);
	background-image: linear-gradient(red 50%, #ccc blue 50%);
	background-size: 20px 20px;
	background-repeat: repeat;
}

/* Vertical 5px black and white stripes */
.vertical{
	background-image: -webkit-linear-gradient(to right, #000 50%, #fff 50%);
	background-image: linear-gradient(to right, #000 50%, #fff 50%);
	background-size: 10px 10px;
	background-repeat: repeat;
}

Diagonal Lines

When striped patterns are rotated, this is relative to the tile dimensions and not the element. To create diagonal lines extra color stops are required so the tiles match up when repeated.

/* Diagonal 20px white and blue stripes */
.diagonal{
	background-image: -webkit-linear-gradient(
		45deg,
	    white 25%,
	    blue 25%,
	    blue 50%,
	    white 50%,
	    white 75%,
	    blue 75%
	);
	background: linear-gradient(
	    45deg,
	    white 25%,
	    blue 25%,
	    blue 50%,
	    white 50%,
	    white 75%,
	    blue 75%
	);
	background-size: 40px 40px;
	background-repeat: repeat;
}

Advanced Lines

Its a bit self indulengent and probably not very well supported cross browser, but you can even create complex line combinations such as a color wheel.

/* CSS3 color wheel */
.color-wheel{
	width: 200px;
	height: 200px;
	border-radius: 50%;
	background:
	linear-gradient(36deg, #272b66 42.34%, transparent 42.34%),
	linear-gradient(72deg, #2d559f 75.48%, transparent 75.48%),
	linear-gradient(-36deg, #9ac147 42.34%, transparent 42.34%) 100% 0,
	linear-gradient(-72deg, #639b47 75.48%, transparent 75.48%) 100% 0,
	linear-gradient(36deg, transparent 57.66%, #e1e23b 57.66%) 100% 100%,
	linear-gradient(72deg, transparent 24.52%, #f7941e 24.52%) 100% 100%,
	linear-gradient(-36deg, transparent 57.66%, #662a6c 57.66%) 0 100%,
	linear-gradient(-72deg, transparent 24.52%, #9a1d34 24.52%) 0 100%,
	#43a1cd linear-gradient(#ba3e2e, #ba3e2e) 50% 100%;
	background-repeat: no-repeat;
	background-size: 50% 50%;
}

Other Resources