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-image:
linear-gradient(90deg, rgba(255,0,0,.4) 0%, rgba(255,0,0,.4) 20%, rgba(200,200,200,.6) 20%, rgba(200,200,200,.6) 30%, rgba(255,0,0,.4) 30%, rgba(255,0,0,.4) 50%, transparent 50%),
linear-gradient(180deg, rgba(255,0,0,.4) 0%, rgba(255,0,0,.4) 20%, rgba(200,200,200,.6) 20%, rgba(200,200,200,.6) 30%, rgba(255,0,0,.4) 30%, rgba(255,0,0,.4) 50%, transparent 50%);
background-color: green;
background-size: 60px 60px;
}


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(at 10% 60%, gold 0 17%, #fff 0 20%, transparent 0 20%),
radial-gradient(at 60% 5%, gold 0 17%, #fff 0 20%, transparent 10%),
linear-gradient(90deg, #fff 3%, transparent 0 50%),
linear-gradient(180deg, #fff 3%, transparent 0 50%);
background-color: gold;
background-size: 120px 120px;
}


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%,gold 71%, white 73%),
radial-gradient(transparent 70%,gold 71%, white 73%) 50px 50px,
conic-gradient(white 25%, white 0 75%,transparent 0);
background-size: 100px 100px;
background-color: white;
}


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,transparent calc(50% - .8px),#283618 50%,transparent calc(50% + .8px),transparent 100%),
linear-gradient(-45deg,transparent calc(50% - .8px),#283618 50%,transparent calc(50% + .8px),transparent 100%),
conic-gradient(from -135deg at 49.5% 100%, #f6d4ba 90deg, transparent 0 100%),
conic-gradient(from 45deg at 49.5% 100%, #f6d4ba 90deg, transparent 0 100%),
conic-gradient(from -45deg at 100% 49.5%, #f6d4ba 90deg, transparent 0 100%),
conic-gradient(from -45deg at 0% 49.5%, #f6d4ba 90deg, transparent 0 100%);
background-color: #d1495b;
background-size: 120px 120px;
}


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, #f5ecd7 20%, transparent 21%),
radial-gradient(circle, #856020 30%, transparent 51%),
radial-gradient(circle, #856020 60%, transparent 61%),
radial-gradient(circle, #f5ecd7 80%, transparent 81%),
radial-gradient(circle, #856020 90%, #856020 91%);
background-color: #856020;
background-size: 150px 150px;
}


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(90deg, white 50%, #859020 47%, transparent 50%),
linear-gradient(180deg, white 50%, transparent 53%);
background-color: #859020;
background-size: 60px 60px;
}


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, black 10%, transparent 11%),
radial-gradient(circle, #abfb17 10%, #6db614 20%, #6db614 25%, transparent 26%),
radial-gradient(circle, white 30%, #dfdfdf 49%, black 50%);
background-color: #000;
background-size: 60px 60px;
}


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(90deg, #000 20%, purple 20%);
background-color:black;
background-size: 50px 50px;
}


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, #901520 47%, white 50%, transparent 51%),
linear-gradient(-315deg, #901520 47%, white 50%, transparent 51%);
background-color: #901520;
background-size: 60px 60px;
}


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