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

Get Pattern

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

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

Get Pattern

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

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

Get Pattern

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

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

Get Pattern

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

CSS3 burgundy stripes and diamonds 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: 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; }

Get Pattern

CSS3 burgundy stripes and diamonds 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:
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;
}

CSS3 red tile 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, red, pink 100%, transparent, red); background-color: red; background-size: 80px 80px; }

Get Pattern

CSS3 red tile 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, red, pink 100%, transparent, red);
background-color: red;
background-size: 80px 80px;
}