CSS3 Patterns Gallery

Japanese cube

#japanese_cube {
background-color:#6d6d88;
background-image: linear-gradient(30deg, #4e4e65 12%, transparent 12.5%, transparent 87%, #4e4e65 87.5%, #4e4e65),
linear-gradient(150deg, #4e4e65 12%, transparent 12.5%, transparent 87%, #4e4e65 87.5%, #4e4e65),
linear-gradient(30deg, #4e4e65 12%, transparent 12.5%, transparent 87%, #4e4e65 87.5%, #4e4e65),
linear-gradient(150deg, #4e4e65 12%, transparent 12.5%, transparent 87%, #4e4e65 87.5%, #4e4e65),
linear-gradient(60deg, #99a 25%, transparent 25.5%, transparent 75%, #99a 75%, #99a),
linear-gradient(60deg, #99a 25%, transparent 25.5%, transparent 75%, #99a 75%, #99a);
background-size:40px 70px;
background-position: 0 0, 0 0, 20px 35px, 20px 35px, 0 0, 20px 35px;
}

Seigaiha

#seigaiha {
background-color:deepskyblue;
background-image:
radial-gradient(circle at 100% 150%, deepskyblue 24%, white 25%, white 28%, deepskyblue 29%, deepskyblue 36%, white 36%, white 40%, transparent 40%, transparent),
radial-gradient(circle at 0 150%, deepskyblue 24%, white 25%, white 28%, deepskyblue 29%, deepskyblue 36%, white 36%, white 40%, transparent 40%, transparent),
radial-gradient(circle at 50% 100%, white 10%, deepskyblue 11%, deepskyblue 23%, white 24%, white 30%, deepskyblue 31%, deepskyblue 43%, white 44%, white 50%, deepskyblue 51%, deepskyblue 63%, white 64%, white 71%, transparent 71%, transparent),
radial-gradient(circle at 100% 50%, white 5%, deepskyblue 6%, deepskyblue 15%, white 16%, white 20%, deepskyblue 21%, deepskyblue 30%, white 31%, white 35%, deepskyblue 36%, deepskyblue 45%, white 46%, white 49%, transparent 50%, transparent),
radial-gradient(circle at 0 50%, white 5%, deepskyblue 6%, deepskyblue 15%, white 16%, white 20%, deepskyblue 21%, deepskyblue 30%, white 31%, white 35%, deepskyblue 36%, deepskyblue 45%, white 46%, white 49%, transparent 50%, transparent);
background-size:80px 40px;
}

Upholstery

#upholstery {
background:
radial-gradient(hsl(0, 100%, 27%) 4%, hsl(0, 100%, 18%) 9%, hsla(0, 100%, 20%, 0) 9%) 0 0,
radial-gradient(hsl(0, 100%, 27%) 4%, hsl(0, 100%, 18%) 8%, hsla(0, 100%, 20%, 0) 10%) 50px 50px,
radial-gradient(hsla(0, 100%, 30%, 0.8) 20%, hsla(0, 100%, 20%, 0)) 50px 0,
radial-gradient(hsla(0, 100%, 30%, 0.8) 20%, hsla(0, 100%, 20%, 0)) 0 50px,
radial-gradient(hsla(0, 100%, 20%, 1) 35%, hsla(0, 100%, 20%, 0) 60%) 50px 0,
radial-gradient(hsla(0, 100%, 20%, 1) 35%, hsla(0, 100%, 20%, 0) 60%) 100px 50px,
radial-gradient(hsla(0, 100%, 15%, 0.7), hsla(0, 100%, 20%, 0)) 0 0,
radial-gradient(hsla(0, 100%, 15%, 0.7), hsla(0, 100%, 20%, 0)) 50px 50px,
linear-gradient(45deg, hsla(0, 100%, 20%, 0) 49%, hsla(0, 100%, 0%, 1) 50%, hsla(0, 100%, 20%, 0) 70%) 0 0,
linear-gradient(-45deg, hsla(0, 100%, 20%, 0) 49%, hsla(0, 100%, 0%, 1) 50%, hsla(0, 100%, 20%, 0) 70%) 0 0;
background-color: #300;
background-size: 100px 100px;
}

Carbon fibre

#carbon_fibre {
background:
radial-gradient(black 15%, transparent 16%) 0 0,
radial-gradient(black 15%, transparent 16%) 8px 8px,
radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px,
radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 8px 9px;
background-color:#343434;
background-size:16px 16px;
}

Tablecloth

#tablecloth {
background-color:white;
background-image: linear-gradient(90deg, rgba(200,0,0,.5) 50%, transparent 50%),
linear-gradient(rgba(200,0,0,.5) 50%, transparent 50%);
background-size:50px 50px;
}