red 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
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 red target 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,#c00 2%,white 5%,white 10%,#c00 12%,white 15%,white 20%,#c00 22%,white 25%,white 30%,#c00 32%,white 35%,white 40%,#c00 42%,white 45%,white 50%,#c00 52%,white 55%,white 60%,#c00 64%,#f00 65%); background-size: 100px 100px; background-color: #fff; }
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,#c00 2%,white 5%,white 10%,#c00 12%,white 15%,white 20%,#c00 22%,white 25%,white 30%,#c00 32%,white 35%,white 40%,#c00 42%,white 45%,white 50%,#c00 52%,white 55%,white 60%,#c00 64%,#f00 65%);
background-size: 100px 100px;
background-color: #fff;
}