green Patterns

CSS3 red and green plaid 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, rgba(255,0,0,.4) 0%, rgba(255,0,0,.4) 20%, rgba(200,200,200,.6) 20%, rgba(200,200,200,.6) 30%, rgba(255,0,0,.4) 30%, rgba(255,0,0,.4) 50%, transparent 50%), linear-gradient(180deg, rgba(255,0,0,.4) 0%, rgba(255,0,0,.4) 20%, rgba(200,200,200,.6) 20%, rgba(200,200,200,.6) 30%, rgba(255,0,0,.4) 30%, rgba(255,0,0,.4) 50%, transparent 50%); CSS3 red and green plaid pattern

Get Pattern

CSS3 red and green plaid 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, rgba(255,0,0,.4) 0%, rgba(255,0,0,.4) 20%, rgba(200,200,200,.6) 20%, rgba(200,200,200,.6) 30%, rgba(255,0,0,.4) 30%, rgba(255,0,0,.4) 50%, transparent 50%),
linear-gradient(180deg, rgba(255,0,0,.4) 0%, rgba(255,0,0,.4) 20%, rgba(200,200,200,.6) 20%, rgba(200,200,200,.6) 30%, rgba(255,0,0,.4) 30%, rgba(255,0,0,.4) 50%, transparent 50%);
background-color: green;
background-size: 60px 60px;
}

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 eyeball 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, black 10%, transparent 11%), radial-gradient(circle, #abfb17 10%, #6db614 20%, #6db614 25%, transparent 26%), radial-gradient(circle, white 30%, #dfdfdf 49%, black 50%); background-color: #000; background-size: 60px 60px; }

Get Pattern

CSS3 eyeball 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, black 10%, transparent 11%),
radial-gradient(circle, #abfb17 10%, #6db614 20%, #6db614 25%, transparent 26%),
radial-gradient(circle, white 30%, #dfdfdf 49%, black 50%);
background-color: #000;
background-size: 60px 60px;
}

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

Get Pattern

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 6.4%),
radial-gradient(farthest-corner at 135px 75px, black 6%, transparent 6.4%),
linear-gradient(180deg, #fff336 50%, transparent 50%),
radial-gradient(closest-side at 100px 78px, white 55%, transparent 55.4%),
radial-gradient(circle, red 40%, transparent 40.4%);
background-size: 200px 200px;
background-color: #fff336;
}

1 2 3 7