tan Patterns

CSS3 red and tan argyle 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,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 CSS3 red and tan argyle pattern

Get Pattern

CSS3 red and tan argyle 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,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;
}

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