CSS3 Linear and Radial Repeating Gradients

Go further with gradient colors. In this demo we extend CSS3 linear and radial gradients into repeating gradients. This demo also shows how to utilize this feature to create Paperline pattern.

Basic Repeating

Linear

.gradient {
	background: -webkit-repeating-linear-gradient(0deg, #f9f9f9, #cccccc 20px);
	background: -moz-repeating-linear-gradient(0deg, #f9f9f9, #cccccc 20px);
	background: -o-repeating-linear-gradient(0deg, #f9f9f9, #cccccc 20px);
	background: repeating-linear-gradient(0deg, #f9f9f9, #cccccc 20px);
}

Radial

.gradient {
	background: -webkit-repeating-radial-gradient(50% 50%, circle, #f9f9f9, #cccccc 20px);
	background: -moz-repeating-radial-gradient(50% 50%, circle, #f9f9f9, #cccccc 20px);
	background: -o-repeating-radial-gradient(50% 50%, circle, #f9f9f9, #cccccc 20px);
	background: repeating-radial-gradient(50% 50%, circle, #f9f9f9, #cccccc 20px);
}

Creating Pattern

Linear

.gradient {
	background: -webkit-repeating-linear-gradient(0deg, #f9f9f9, #f9f9f9 20px, #cccccc 20px, #cccccc 40px);
	background: -moz-repeating-linear-gradient(0deg, #f9f9f9, #f9f9f9 20px, #cccccc 20px, #cccccc 40px);
	background: -o-repeating-linear-gradient(0deg, #f9f9f9, #f9f9f9 20px, #cccccc 20px, #cccccc 40px);
	background: repeating-linear-gradient(0deg, #f9f9f9, #f9f9f9 20px, #cccccc 20px, #cccccc 40px);
}

Radial

.gradient {
	background: -webkit-repeating-radial-gradient(50% 50%, circle, #f9f9f9, #f9f9f9 20px, #cccccc 20px, #cccccc 40px);
	background: -moz-repeating-radial-gradient(50% 50%, circle, #f9f9f9, #f9f9f9 20px, #cccccc 20px, #cccccc 40px);
	background: -o-repeating-radial-gradient(50% 50%, circle, #f9f9f9, #f9f9f9 20px, #cccccc 20px, #cccccc 40px);
	background: repeating-radial-gradient(50% 50%, circle, #f9f9f9, #f9f9f9 20px, #cccccc 20px, #cccccc 40px);
}

Creating Paperline

.gradient {
	background: -webkit-repeating-linear-gradient( -90deg, #f9f9f9, #f9f9f9 20px, #cccccc 21px);
	background: -moz-repeating-linear-gradient( -90deg, #f9f9f9, #f9f9f9 20px, #cccccc 21px);
	background: -o-repeating-linear-gradient( -90deg, #f9f9f9, #f9f9f9 20px, #cccccc 21px);
	background: repeating-linear-gradient( -90deg, #f9f9f9, #f9f9f9 20px, #cccccc 21px);
	background-size: 100% 21px;
}
.gradient:before {
	content: "";
	display: inline-block;
	height: 500px;
	width: 4px;
	border-left: 4px double #FCA1A1;
	position: relative;
	left: 30px;
}