VRx TexturesIconsImagesFontsColorGradientsBordersHelpSitemap textures.vrx.tools


CSS3 Backgrounds
Shamelessly stolen from http://lea.verou.me/css3patterns/



Stairs

background: 
linear-gradient(63deg, #999 23%, transparent 23%) 7px 0, 
linear-gradient(63deg, transparent 74%, #999 78%), 
linear-gradient(63deg, transparent 34%, #999 38%, #999 58%,
transparent 62%), 
#444;
background-size: 16px 48px;


Vertical

background-color: gray;
background-image: linear-gradient(90deg,
transparent 50%, rgba(255,255,255,.5) 50%);
background-size: 50px 50px;


Horizontal

background-color: gray;
background-image: linear-gradient(transparent 50%,
rgba(255,255,255,.5) 50%);
background-size: 50px 50px;


Steel

background:
radial-gradient(
rgba(255,255,255,.35), rgba(255,255,255,0) 20%, rgba(255,255,255,0) 21%),
radial-gradient(
rgba(0,0,0,.2), rgba(0,0,0,0) 20%, rgba(0,0,0,0) 21%),
radial-gradient(
farthest-corner, #f0f0f0, #c0c0c0);
background-size: 10px 10px, 10px 10px, 100% 100%;
background-repeat: repeat, repeat, no-repeat;
background-position: 1px 1px, 0px 0px, center center;


Carbon Fiber #2

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:#282828;
background-size:16px 16px;


Argyle

background-color: #6d695c;
background-image:
repeating-linear-gradient(120deg, rgba(255,255,255,.1),
rgba(255,255,255,.1) 1px, transparent 1px, transparent 60px),
repeating-linear-gradient(60deg, rgba(255,255,255,.1),
rgba(255,255,255,.1) 1px, transparent 1px, transparent 60px),
linear-gradient(60deg, rgba(0,0,0,.1) 25%, transparent 25%,
transparent 75%, rgba(0,0,0,.1) 75%, rgba(0,0,0,.1)),
linear-gradient(120deg, rgba(0,0,0,.1) 25%, transparent 25%,
transparent 75%, rgba(0,0,0,.1) 75%, rgba(0,0,0,.1));
background-size: 70px 120px;}


Diagonal

background-color: gray;
background-image: repeating-linear-gradient(45deg,
transparent, transparent 35px, rgba(255,255,255,.5)
35px, rgba(255,255,255,.5) 70px);


}

Weave

background:
linear-gradient(135deg, #708090 22px, #d9ecff 22px,
#d9ecff 24px, transparent 24px, transparent 67px,
#d9ecff 67px, #d9ecff 69px, transparent 69px),
linear-gradient(225deg, #708090 22px, #d9ecff 22px,
#d9ecff 24px, transparent 24px, transparent 67px,
#d9ecff 67px, #d9ecff 69px, transparent 69px)0 64px;
background-color:#708090;
background-size: 64px 128px


Waves

background: 
radial-gradient(circle at 100% 50%, transparent 20%,
rgba(255,255,255,.3) 21%, rgba(255,255,255,.3) 34%,
transparent 35%, transparent),
radial-gradient(circle at 0% 50%, transparent 20%,
rgba(255,255,255,.3) 21%, rgba(255,255,255,.3) 34%,
transparent 35%, transparent) 0 -50px;
background-color: slategray;
background-size:75px 100px;


Cross

background: 
radial-gradient(circle, transparent 20%, slategray 20%,
slategray 80%, transparent 80%, transparent),
radial-gradient(circle, transparent 20%, slategray 20%,
slategray 80%, transparent 80%, transparent) 50px 50px,
linear-gradient(#A8B1BB 8px, transparent 8px) 0 -4px,
linear-gradient(90deg, #A8B1BB 8px, transparent 8px) -4px 0;
background-color: slategray;
background-size:100px 100px, 100px 100px, 50px 50px, 50px 50px;


Shippo

background-color:#def;
background-image: radial-gradient(closest-side,
transparent 98%, rgba(0,0,0,.3) 99%),
radial-gradient(closest-side, transparent 98%,
rgba(0,0,0,.3) 99%);
background-size:80px 80px;
background-position:0 0, 40px 40px;


Japanese Cube

background-color:#556;
background-image: linear-gradient(30deg, #445 12%,
transparent 12.5%, transparent 87%, #445 87.5%, #445),
linear-gradient(150deg, #445 12%, transparent 12.5%,
transparent 87%, #445 87.5%, #445),
linear-gradient(30deg, #445 12%, transparent 12.5%,
transparent 87%, #445 87.5%, #445),
linear-gradient(150deg, #445 12%, transparent 12.5%,
transparent 87%, #445 87.5%, #445),
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:80px 140px;
background-position: 0 0, 0 0, 40px 70px, 40px 70px,
0 0, 40px 70px;


Carbon Fibre #1

background:
linear-gradient(27deg, #151515 5px, transparent 5px) 0 5px,
linear-gradient(207deg, #151515 5px, transparent 5px) 10px 0px,
linear-gradient(27deg, #222 5px, transparent 5px) 0px 10px,
linear-gradient(207deg, #222 5px, transparent 5px) 10px 5px,
linear-gradient(90deg, #1b1b1b 10px, transparent 10px),
linear-gradient(#1d1d1d 25%, #1a1a1a 25%, #1a1a1a 50%,
transparent 50%, transparent 75%, #242424 75%, #242424);
background-color: #131313;
background-size: 20px 20px;