circular 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 geometric circle 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, #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; CSS3 geometric circle pattern

Get Pattern

CSS3 geometric circle 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, #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;
}

CSS3 blue 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%,#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; }

Get Pattern

CSS3 blue 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%,#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;
}