geometric Patterns
CSS3 gold outline overlapping circles 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: 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:
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;
}
CSS3 red target 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,#c00 2%,white 5%,white 10%,#c00 12%,white 15%,white 20%,#c00 22%,white 25%,white 30%,#c00 32%,white 35%,white 40%,#c00 42%,white 45%,white 50%,#c00 52%,white 55%,white 60%,#c00 64%,#f00 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: radial-gradient(
circle,#c00 2%,white 5%,white 10%,#c00 12%,white 15%,white 20%,#c00 22%,white 25%,white 30%,#c00 32%,white 35%,white 40%,#c00 42%,white 45%,white 50%,#c00 52%,white 55%,white 60%,#c00 64%,#f00 65%);
background-size: 100px 100px;
background-color: #fff;
}
CSS3 green square 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: 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:
linear-gradient(90deg, white 50%, #859020 47%, transparent 50%),
linear-gradient(180deg, white 50%, transparent 53%);
background-color: #859020;
background-size: 60px 60px;
}
CSS3 red brick 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: 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-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;
}