css3 Patterns

Polka Dot CSS3 Background Pattern

You can download the pattern or use the CSS3 code below (you can copy the text).body{ /* CSS3 pattern provided by JonesPatterns.com */ background-image: radial-gradient(circle,#f88 5px,transparent 0px), radial-gradient(circle,#fcf 5px, transparent 0px); background-image: -o-radial-gradient(circle,#f88 5px,transparent 0px), -o-radial-gradient(circle,#fcf 5px, transparent 0px); background-image: -webkit-radial-gradient(circle,#f88 5px,transparent 0px), -webkit-radial-gradient(circle,#fcf 5px, transparent 0px); background-size: 25px 25px; background-position: 12px 12px,0px 0px; background-color: Polka Dot CSS3 Background Pattern

Get Pattern

Polka Dot CSS3 Background Pattern

You can download the pattern or use the CSS3 code below (you can copy the text).
body{
/* CSS3 pattern provided by JonesPatterns.com */
background-image:
radial-gradient(circle,#f88 5px,transparent 0px),
radial-gradient(circle,#fcf 5px, transparent 0px);
background-image:
-o-radial-gradient(circle,#f88 5px,transparent 0px),
-o-radial-gradient(circle,#fcf 5px, transparent 0px);
background-image:
-webkit-radial-gradient(circle,#f88 5px,transparent 0px),
-webkit-radial-gradient(circle,#fcf 5px, transparent 0px);
background-size: 25px 25px;
background-position: 12px 12px,0px 0px;
background-color: #ffffff;
}

Orange Chevron CSS3 Background Pattern

You can download the pattern or use the CSS3 code below (you can copy the text). body{ /* CSS3 pattern provided by JonesPatterns.com */ background-image: -moz-linear-gradient(-120deg, #f90 30px, transparent 30px), -moz-linear-gradient(-60deg, #f90 30px, transparent 30px), -moz-linear-gradient(-120deg, #fc0 60px, transparent 60px), -moz-linear-gradient(-60deg, #fc0 60px, transparent 60px), -moz-linear-gradient(-120deg, #f90 70px, transparent 70px), -moz-linear-gradient(-60deg, #f90 70px, transparent 70px), Orange Chevron CSS3 Background Pattern

Get Pattern

You can download the pattern or use the CSS3 code below (you can copy the text).

body{
/* CSS3 pattern provided by JonesPatterns.com */
background-image:
-moz-linear-gradient(-120deg, #f90 30px, transparent 30px),
-moz-linear-gradient(-60deg, #f90 30px, transparent 30px),
-moz-linear-gradient(-120deg, #fc0 60px, transparent 60px),
-moz-linear-gradient(-60deg, #fc0 60px, transparent 60px),
-moz-linear-gradient(-120deg, #f90 70px, transparent 70px),
-moz-linear-gradient(-60deg, #f90 70px, transparent 70px),
-moz-linear-gradient(-120deg, #ff0 80px, transparent 80px),
-moz-linear-gradient(-60deg, #ff0 80px, #f90 80px);
background-image:
-o-linear-gradient(-120deg, #f90 30px, transparent 30px),
-o-linear-gradient(-60deg, #f90 30px, transparent 30px),
-o-linear-gradient(-120deg, #fc0 60px, transparent 60px),
-o-linear-gradient(-60deg, #fc0 60px, transparent 60px),
-o-linear-gradient(-120deg, #f90 70px, transparent 70px),
-o-linear-gradient(-60deg, #f90 70px, transparent 70px),
-o-linear-gradient(-120deg, #ff0 80px, transparent 80px),
-o-linear-gradient(-60deg, #ff0 80px, #f90 80px);
background-image:
-webkit-linear-gradient(-120deg, #f90 30px, transparent 30px),
-webkit-linear-gradient(-60deg, #f90 30px, transparent 30px),
-webkit-linear-gradient(-120deg, #fc0 60px, transparent 60px),
-webkit-linear-gradient(-60deg, #fc0 60px, transparent 60px),
-webkit-linear-gradient(-120deg, #f90 70px, transparent 70px),
-webkit-linear-gradient(-60deg, #f90 70px, transparent 70px),
-webkit-linear-gradient(-120deg, #ff0 80px, transparent 80px),
-webkit-linear-gradient(-60deg, #ff0 80px, #f90 80px);
background-image:
linear-gradient(210deg, #f90 30px, transparent 30px),
linear-gradient(150deg, #f90 30px, transparent 30px),
linear-gradient(210deg, #fc0 60px, transparent 60px),
linear-gradient(150deg, #fc0 60px, transparent 60px),
linear-gradient(210deg, #f90 70px, transparent 70px),
linear-gradient(150deg, #f90 70px, transparent 70px),
linear-gradient(210deg, #ff0 80px, transparent 80px),
linear-gradient(150deg, #ff0 80px, #f90 80px);
background-size: 80px 100px;
}