Background Patterns

This CSS Reference section displays the code for examples that illustrate the usage of various CSS background patterns.
BackgroundPatterns.html

<!DOCTYPE html>
<html>
	<head>
		<title>XoaX.net's CSS</title>
		<style>
			.cStripes {
				background: repeating-linear-gradient(gray 0 50%, white 0 100%);
				background-size: 100% 4px;
			}
			.cSoftStripes {
				background: repeating-linear-gradient(gray 50%, white 100%);
				background-size: 100% 8px;
			}
			.cWideStripes {
				background: repeating-linear-gradient(lightgray 0 50%, white 0 100%);
				background-size: 100% 16px;
			}
			.cVerticalStripes {
				background: repeating-linear-gradient(to right, gray 0 50%, white 0 100%);
				background-size: 4px 100%;
			}
			.cAngledStripes {
				background: repeating-linear-gradient(45deg, lightgray, lightgray 4px, white 4px, white 8px);
			}
			.cCheckerboard {
				background: repeating-conic-gradient(gray 0 25%, white 0 50%);
				background-size: 8px 8px;
			}
			.cOffsetCheckerboard {
				background: repeating-conic-gradient(gray 0 25%, white 0 50%);
				background-position: 2px 2px, 8px 8px;
				background-size: 8px 8px;
			}
			.cLargeCheckerboard {
				background: repeating-conic-gradient(lightgray 0 25%, white 0 50%);
				background-size: 32px 32px;
			}
			.cPicnicTablecloth {
				background: repeating-conic-gradient(pink 0 25%, red 0 50%, pink 0 75%, white 0 100%);
				background-size: 16px 16px;
			}
			.cHalves {
				background: linear-gradient(gray, gray 50%, lightgray 50%, lightgray);
			}
			.cVerticalHalves {
				background: linear-gradient(to right, gray, gray 50%, lightgray 50%, lightgray);
			}
			.cVerticalThirds {
				background: linear-gradient(to right, red, red 33%, white 33%, white 66%, blue 66%, blue);
			}
			.cSlices {
				background: repeating-conic-gradient(pink 0 10%, azure 0 20%, lime 0 30%, white 0 40%, gold 0 50%, aqua 0 60%, beige 0 70%, khaki 0 80%, cyan 0 90%, coral 0 100%);
				background-size: 18px 18px;
			}
			.cZigzag {
				background: linear-gradient(135deg, beige 25%, transparent 25%),
				linear-gradient(225deg, beige 25%, transparent 25%),
				linear-gradient(45deg, beige 25%, transparent 25%),
				linear-gradient(315deg, beige 25%, khaki 25%);
				background-position:  10px 0, 10px 0, 0 0, 0 0;
				background-size: 18px 18px;
			}
			.cZigzag3D {
				background: linear-gradient(135deg, #80808055 25%, transparent 25%) -10px 0/ 20px 20px,
				linear-gradient(225deg, gray 25%, transparent 25%) -10px 0/ 20px 20px,
				linear-gradient(315deg, #80808055 25%, transparent 25%) 0px 0/ 20px 20px,
				linear-gradient(45deg, gray 25%, lightgray 25%) 0px 0/ 20px 20px;
			}
			.cIsometric {
				background:
				linear-gradient(30deg, lightgray 12%, transparent 12.5%, transparent 87%, lightgray 87.5%, lightgray),
				linear-gradient(150deg, lightgray 12%, transparent 12.5%, transparent 87%, lightgray 87.5%, lightgray),
				linear-gradient(30deg, lightgray 12%, transparent 12.5%, transparent 87%, lightgray 87.5%, lightgray),
				linear-gradient(150deg, lightgray 12%, transparent 12.5%, transparent 87%, lightgray 87.5%, lightgray),
				linear-gradient(60deg, #D3D3D377 25%, transparent 25.5%, transparent 75%, #D3D3D377 75%, #D3D3D377),
				linear-gradient(60deg, #D3D3D377 25%, transparent 25.5%, transparent 75%, #D3D3D377 75%, #D3D3D377);
				background-size: 20px 35px;
				background-position: 0 0, 0 0, 10px 18px, 10px 18px, 0 0, 10px 18px;
			}
			.cSquares {
				background:linear-gradient(lightgray 1px, transparent 1px), linear-gradient(to right, lightgray 1px, white 1px);
				background-size: 8px 8px;
			}
			.cCrosses {
				background: radial-gradient(circle, transparent 20%, wheat 20%, wheat 80%, transparent 80%, transparent),
				radial-gradient(circle, transparent 20%, wheat 20%, wheat 80%, transparent 80%, transparent) 25px 25px,
				linear-gradient(peru 2px, transparent 2px) 0 -1px,
				linear-gradient(90deg, peru 2px, wheat 2px) -1px 0;
				background-size: 50px 50px, 50px 50px, 25px 25px, 25px 25px;
			}
			.cGridDots {
				background: radial-gradient(white 1.5px, lightgray 1.5px);
				background-size: 18px 18px;
			}
			.cAlternatingDots {
				background: radial-gradient(gray 1.5px, transparent 1.5px),
				radial-gradient(gray 1.5px, lightgray 1.5px);
				background-size: 20px 20px;
				background-position: 0 0,10px 10px;
			}
			.cGraphPaper {
				background: linear-gradient(lightgray 2px, transparent 2px),
				linear-gradient(90deg, lightgray 2px, transparent 2px),
				linear-gradient(lightgray 1px, transparent 1px),
				linear-gradient(90deg, lightgray 1px, white 1px);
				background-size: 50px 50px, 50px 50px, 10px 10px, 10px 10px;
				background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px;
				height: 60px;
			}
			.cTriangles {
				background: linear-gradient(45deg, gray 50%, lightgray 50%);
				background-size: 11px 11px;
			}
		</style>
	</head>
	<body>
		<h1 class="cStripes">Stripes</h1>
		<h1 class="cSoftStripes">Soft Stripes</h1>
		<h1 class="cWideStripes">Wide Stripes</h1>
		<h1 class="cVerticalStripes">Vertical Stripes</h1>
		<h1 class="cAngledStripes">Angled Stripes</h1>
		<h1 class="cCheckerboard">Checkerboard</h1>
		<h1 class="cOffsetCheckerboard">Offset Checkerboard</h1>
		<h1 class="cLargeCheckerboard">Large Checkerboard</h1>
		<h1 class="cPicnicTablecloth">Picnic Tablecloth</h1>
		<h1 class="cHalves">Halves</h1>
		<h1 class="cVerticalHalves">Vertical Halves</h1>
		<h1 class="cVerticalThirds">Vertical Thirds</h1>
		<h1 class="cSlices">Slices</h1>
		<h1 class="cZigzag">Zigzag</h1>
		<h1 class="cZigzag3D">Zigzag 3D</h1>
		<h1 class="cIsometric">Isometric</h1>
		<h1 class="cSquares">Squares</h1>
		<h1 class="cCrosses">Crosses</h1>
		<h1 class="cGridDots">Grid Dots</h1>
		<h1 class="cAlternatingDots">Alternating Dots</h1>
		<h1 class="cGraphPaper">Graph Paper</h1>
		<h1 class="cTriangles">Triangles</h1>
	</body>
</html>
Core CSS

Background Patterns

BackgroundPatterns.html

Output
