gold Patterns

CSS3 gold puzzle 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(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, CSS3 gold puzzle pattern

Get Pattern

CSS3 gold puzzle 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(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;
}

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 realistic yellow corn 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,#ffffe1 5%, yellow 45%, gold 88%, #dbb300 94%, #bd9a00 100%); background-color:red; background-size: 50px 25px; }

Get Pattern

CSS3 realistic yellow corn 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,#ffffe1 5%, yellow 45%, gold 88%, #dbb300 94%, #bd9a00 100%);
background-color:red;
background-size: 50px 25px;
}