CSS3 Repetitive Gradients

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