CSS3 cross pattern (gradients)
Using CSS linear gradients to create a repeating cross pattern.
by secretgspot
CSS
html {height:100%;}
body {
min-height:100%;
background-color:
#C5E8FA;
background-size:
100px 100px;
background-position:
100px 98px,
109px 65px,
121px 86px,
88px 77px,
50px 48px,
59px 15px,
71px 36px,
38px 27px;
background-image:
-webkit-linear-gradient(15deg, #51AEE0 7.5%, transparent 7.5%),
-webkit-linear-gradient(195deg, #51AEE0 7.5%, transparent 7.5%),
-webkit-linear-gradient(105deg, #51AEE0 7.5%, transparent 7.5%),
-webkit-linear-gradient(285deg, #51AEE0 7.5%, transparent 7.5%),
-webkit-linear-gradient(15deg, #51AEE0 7.5%, transparent 7.5%),
-webkit-linear-gradient(195deg, #51AEE0 7.5%, transparent 7.5%),
-webkit-linear-gradient(105deg, #51AEE0 7.5%, transparent 7.5%),
-webkit-linear-gradient(285deg, #51AEE0 7.5%, transparent 7.5%);
background-image:
-moz-linear-gradient(15deg, #51AEE0 7.5%, transparent 7.5%),
-moz-linear-gradient(195deg, #51AEE0 7.5%, transparent 7.5%),
-moz-linear-gradient(105deg, #51AEE0 7.5%, transparent 7.5%),
-moz-linear-gradient(285deg, #51AEE0 7.5%, transparent 7.5%),
-moz-linear-gradient(15deg, #51AEE0 7.5%, transparent 7.5%),
-moz-linear-gradient(195deg, #51AEE0 7.5%, transparent 7.5%),
-moz-linear-gradient(105deg, #51AEE0 7.5%, transparent 7.5%),
-moz-linear-gradient(285deg, #51AEE0 7.5%, transparent 7.5%);
background-image:
-o-linear-gradient(15deg, #51AEE0 7.5%, transparent 7.5%),
-o-linear-gradient(195deg, #51AEE0 7.5%, transparent 7.5%),
-o-linear-gradient(105deg, #51AEE0 7.5%, transparent 7.5%),
-o-linear-gradient(285deg, #51AEE0 7.5%, transparent 7.5%),
-o-linear-gradient(15deg, #51AEE0 7.5%, transparent 7.5%),
-o-linear-gradient(195deg, #51AEE0 7.5%, transparent 7.5%),
...