CSS3 Patterns

You can download the pattern or use the CSS3 code below (you can copy the text).
body {
/* CSS3 pattern provided by JonesPatterns.com */
background:
linear-gradient(90deg,transparent 18%, #a63a50 18%, #a63a50 25%, transparent 25%),
conic-gradient(from 45deg, #a63a50 90deg, transparent 90deg),
conic-gradient(from -135deg, #a63a50 90deg, transparent 90deg) 55px 0 #fff;
background-size: 130px 130px;
}


You can download the pattern or use the CSS3 code below (you can copy the text).
body {
/* CSS3 pattern provided by JonesPatterns.com */
background:
radial-gradient(transparent 70%,#2a9d8f 71%),
radial-gradient(transparent 70%,#2a9d8f 71%) 100px 100px,
conic-gradient(#264653 25%, #002032 0 50%, #264653 0 75%,#002032 0);
background-size: 200px 200px;
background-color: #2a9d8f;
}


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: linear-gradient(45deg, red, pink 100%, transparent, red);
background-color: red;
background-size: 80px 80px;
}


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,#ffffe1 5%, yellow 45%, gold 88%, #dbb300 94%, #bd9a00 100%);
background-color:red;
background-size: 50px 25px;
}


You can download the pattern or use the CSS3 code below (you can copy the text).
body {
/* CSS3 pattern provided by JonesPatterns.com */
background:
radial-gradient(circle, transparent 50%, black 50.4%, #c6f575 51.8%),
radial-gradient(farthest-corner at 62px 72px, white 2%, transparent 2.4%),
radial-gradient(farthest-corner at 132px 72px, white 2%, transparent 2.4%),
radial-gradient(farthest-corner at 65px 75px, black 6%, transparent 6.4%),
radial-gradient(farthest-corner at 135px 75px, black 6%, transparent 6.4%),
linear-gradient(180deg, #fff336 50%, transparent 50%),
radial-gradient(closest-side at 100px 78px, white 55%, transparent 55.4%),
radial-gradient(circle, red 40%, transparent 40.4%);
background-size: 200px 200px;
background-color: #fff336;
}


You can download the pattern or use the CSS3 code below (you can copy the text).
body {
/* CSS3 pattern provided by JonesPatterns.com */
background:
conic-gradient(from -45deg, #a63a50 90deg, transparent 90deg),
conic-gradient(from 135deg, #a63a50 90deg, transparent 90deg) 65px 0 pink;
background-size: 130px 130px;
}


You can download the pattern or use the CSS3 code below (you can copy the text).
body {
/* CSS3 pattern provided by JonesPatterns.com */
background:
radial-gradient(farthest-corner at 20px 64px, gold 6%, transparent 2.4%),
radial-gradient(farthest-corner at 57px 57px, white 2%, transparent 2.4%),
radial-gradient(farthest-corner at 60px 60px, black 6%, transparent 6.4%),
radial-gradient(farthest-corner at 60px 68px, yellow 20%, transparent 20.4%),
radial-gradient(farthest-corner at 60px 120px, yellow 21%, transparent 22.4%),
linear-gradient(180deg, #9dd9f3 50%, transparent 50%),
radial-gradient(circle, yellow 50%, transparent 51%);
background-size: 200px 200px;
background-color: #9dd9f3;
}


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:
linear-gradient(315deg, #eee 1%, transparent 50%, #eee 51%, gray 100%);
background-color:gray;
background-size: 80px 80px;
}


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,white 0%,#bbb 2%,white 5%,white 10%,#aaa 12%,white 15%,white 20%,#bbb 22%,white 25%,white 30%,#aaa 32%,white 35%,white 40%,#bbb 42%,white 45%,white 50%,#aaa 52%,white 55%,white 60%,#bbb 62%,white 65%);
background-size: 100px 100px;
background-color: #fff;
}


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(135deg,#f77 25%,transparent 25%),
-moz-linear-gradient(45deg,#faa 25%,transparent 25%),
-moz-linear-gradient(135deg,transparent 75%,#f66 75%),
-moz-linear-gradient(45deg,#800 75%,#f44 75%);
background-image:
-o-linear-gradient(135deg,#f77 25%,transparent 25%),
-o-linear-gradient(45deg,#faa 25%,transparent 25%),
-o-linear-gradient(135deg,transparent 75%,#f66 75%),
-o-linear-gradient(45deg,#800 75%,#f44 75%);
background-image:
-webkit-linear-gradient(135deg,#f77 25%,transparent 25%),
-webkit-linear-gradient(45deg,#faa 25%,transparent 25%),
-webkit-linear-gradient(135deg,transparent 75%,#f66 75%),
-webkit-linear-gradient(45deg,#800 75%,#f44 75%);
background-image:
linear-gradient(135deg,#f77 25%,transparent 25%),
linear-gradient(45deg,#faa 25%,transparent 25%),
linear-gradient(135deg,transparent 75%,#f66 75%),
linear-gradient(45deg,#800 75%,#f44 75%);
background-size:40px 40px;
background-color: #fff;
}