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

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

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

CSS3 smile face 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(circle, transparent 50%, black 50.4%, #c6f575 51.8%), radial-gradient(farthest-corner at 62px 72px, white 2%, transparent 2.4%), radial-gradient(farthest-corner at 132px 72px, white 2%, transparent 2.4%), radial-gradient(farthest-corner at 65px 75px, black 6%, transparent … CSS3 smile face pattern

CSS3 pink and burgundy chevron 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: conic-gradient(from -45deg, #a63a50 90deg, transparent 90deg), conic-gradient(from 135deg, #a63a50 90deg, transparent 90deg) 65px 0 pink; background-size: 130px 130px; }

CSS3 rubber duck 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(farthest-corner at 20px 64px, gold 6%, transparent 2.4%), radial-gradient(farthest-corner at 57px 57px, white 2%, transparent 2.4%), radial-gradient(farthest-corner at 60px 60px, black 6%, transparent 6.4%), radial-gradient(farthest-corner at 60px 68px, yellow 20%, … CSS3 rubber duck pattern

CSS3 silver diagonal stripe 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(315deg, #eee 1%, transparent 50%, #eee 51%, gray 100%); background-color:gray; background-size: 80px 80px; }